Require a Directive's Controller inside another Directive

Question

I'm trying to get two directives to communicate with each other via their (inner defined) controllers, but I'm new to angular and still not clear on a couple of things.

Essentially, I just want two separate directives where, when you click on an element inside directive A, some function within B executes; I want to tell B to update itself, based on what happens in A. What I've got so far:

app.directive('A', function(){
    return{
        restrict: 'E',
        require:'B',
        templateUrl:'a.html',
        link: function(scope, element, attr, bController){
            //should I run B's behavior here?
            //how? can't reach B's controller
        },
        controller: function(){
            //or here?
            //how do I access B's controller here?
        },
        controllerAs:'A'
    };
});

app.directive('B', function(){
    return{
        restrict: 'E',
        templateUrl:'b.html',
        link: function(scope, element, attr){

        },
        controller: function(){
            //here there'll be functions that manipulate
            //elements inside this directive (B)
        },
        controllerAs:'B'
    };
});

I'm getting an error, since A is trying to find the controller named B, but it's a directive: https://docs.angularjs.org/error/$compile/ctreq

Also, should I manipulate elements from within the link function, or the directives controller? Even after reading, I'm still a bit fuzzy on link vs controller; the way I see it: link is like a constructor of sorts, whereas the controller is where behavior goes.

So does that mean I always place DOM manipulation inside of the controller?

Is there any other way to approach this? I've read a bit about $scope, but still not entirely clear on that either.

Answer 1

You can only require directives in parent elements or in the same element. You're probably using B inside A, or vice verse.

If that's the case, you have one directive being used inside the other, you can go to the inner direcive and require the outer by using: require: '^A'. The ^ means it can be directive from your parent.

If the directives are siblings, you could build a third directive that would parent them both, and required it from inside both and they would use this medium to communicate:

app.directive('C', function() {
  return {
    controller: function() {
      this.registerPartyA = function(partyA) {
        // ...
      };

      this.registerPartyB = function(partyB) {
        // ...
      };
    }
  }
});

Then from your directives;

app.directive('B', function() {
  return {
    require: '^C',
    link: function(scope, elm, attr, cCtrl) {
      cCtrl.registerPartyB(...);

      // maybe when user clicks you do
      // cCtrl.aCtrl.doSomething()
    }
  };
});

If they're not related anyhow, you could still use a service and inject the service in both directives, and use this as a common place.

Finally, if both directives share the same scope (are under the same element, or none of the directives require isolated/children scopes) you could simply declare the method directly inside the $scope and simply call it from the other directive:

app.directive('A', function() {
  return {
    controller: function($scope) {
      $scope.declaredByA = function() {
        // ...
      };
    }
  };
});

app.directive('B', function() {
  return {
    controller: function($scope) {
      $scope.clicked = function() {
        $scope.declaredByA();
      };
    }
  };
});

And a last call, you could use $scope.$broadcast and $scope.$emit to do the communication.

I would try in the order I've mentioned, as long as you meet the requirements.

Answer 2

From the AngularJS documentation for controllers:

Use controllers to:

• Set up the initial state of the $scope object.
• Add behavior to the $scope object.

Do not use controllers to:

• Manipulate DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has databinding for most cases and directives to encapsulate manual DOM manipulation.
• Format input — Use angular form controls instead. Filter output — Use angular filters instead.
• Share code or state across controllers — Use angular services instead.
• Manage the life-cycle of other components (for example, to create service instances).

From the AngularJS documentation for directives:

Directives can be thought of as markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

So, just to make things clear, no you should never manipulate the DOM from within a controller. You should always use the directives link function to manipulate the DOM.

If you want your controllers to share state information with one another, you should consider adding an angular Service (documentation here). Service are objects that are instantiated once, and whose state is preserve across the module. They can be injected into controllers.

Another option is to implement some $emit and $on event raisers and listeners. This would allow you to communicate across your controllers using events to signal state changes. Here is another SO post that explains this better than I could: Working with $scope.$emit and $scope.$on.

Hope this helps!