What is the difference between using "require:ngController" and "controller:" in a directive?

Question

I'm switching from a directive created using:

return {
    restrict: 'E',
    templateUrl: '/src/templates/noise/swatches.html',
    link: link,
    controller: "swatchesController"
};

and

<swatches-directive></swatches-directive>

to using:

return {
    restrict: 'E',
    templateUrl: '/src/templates/noise/swatches.html',
    link: link,
    require: "ngController"
};

and

<swatches-directive ng-controller="swatchesController"></swatches-directive>

This seems to have unanticipated side-effects on existing watches belonging to other directives against scope variables that the swatches-directive assigns to. From what I understand, the new way introduces a new scope, so assigning watched variables to the parent scope seems like it should work, but those watches refuse to trigger.

Are there fundamental differences between the two methods used above?

Check this http://stackoverflow.com/questions/15672709/how-to-require-a-controller-in-an-angularjs-directive — Nitin Varpe, Jun 23 '15 at 10:33
Where are the watches assigned? And where do they fail to trigger? — Davin Tryon, Jun 23 '15 at 10:39
@DavinTryon The watches are assigned on another directive, which is a sibling of swatches-directive. They fail to trigger when swatchesController updates one of their properties. I'll try and create a simplest possible example. — deworde, Jun 23 '15 at 10:55

score 0 · Answer 1 · answered Jun 23 '15 at 11:21

Few points to note:

You should use the controllerAs property to segregate the controllers. It's considered as a best practice. You can read it here
Ideally, you should provide the controller within the directive itself. The way you're doing it causes spagetti scopes. Keep the directive scope separate from parent scopes. If you want you can pass the required dependencies to a directive.

score 0 · Answer 2 · answered Jun 23 '15 at 11:41

return {
    restrict: 'E',
    templateUrl: '/src/templates/noise/swatches.html',
    link: link,
    require: "ngDirective", //Get the controller of that directive
    link : function(scope, element, attributes, ngController){

      //With require, you say: get the controller of that directive. You can       
      //then use it as 4th parameter (ngController) 

    }

};

Note: you can pass multiple controllers

return {
    restrict: 'E',
    templateUrl: '/src/templates/noise/swatches.html',
    link: link,
    require: ["ngDirective1", "ngDirective2"], //Get the controller of that directive
    link : function(scope, element, attributes, controllers){
      var ctrl1 = controllers[0];
      var ctrl2 = controllers[1];

      //Require can be a string or, as this example, an array.

    }

};

The directive passed inside require must be in your directive. If it is not, you can say: find it on container elements with ^: require : '^ngDirective'

What is the difference between using "require:ngController" and "controller:" in a directive?

2 Answers2