AngularJS Directive Controller definition

Question

In AngularJS directive I understood there are 2 ways to define the controller. The controller can be defined as part of directive definition using controller: option. Alternatively, the view of the directive templateURL:'someview.html' can contain the required controller. Can anyone explain what are the differences between these 2 options and which one to use when?

within directive:

app.directive('myDirective', function() {
    templateUrl: 'someview.html,
    controller: 'MyController'   ----> either here
});

someview.html

<div ng-contoller='my-controller'>  ----> or here

</div>

Answer 1

If the directive will break without the controller, then the directive should define the controller it needs. This creates a one-to-one association between the directive and controller.

Let's assume we have a "Booking" directive that needs "BookingController". It's redundant for developer to specific both the directive and controller each time they need to use the Booking directive. So the directive can define controller: "BookingController" and AngularJS will automatically instantiate that controller when the directive is used.

What if your directive is generic? You have a directive that only handles the formatting of the Booking order, but there are many controllers that handle different kinds of bookings. In this case, the directive would not define the controller. It would only define what it needs "booking_number" in the current scope. The developer would have to "use" that directive somewhere in the DOM "under" a controller that handles booking.

It's best to think of directives as code that publishes the current scope, but does not manipulate the current scope. Controllers are code that manipulate the current scope, but don't know how the scope is published. Views (or HTML) is where these two things are snapped together in order of dependencies.

Answer 2

Make sure you put quotes (" or ') around the controller name if you defined your controller outside directive or else it will show error

Wrong:

controller: MyController

Correct:

controller: 'MyController'

It makes a big difference; in the second case, the controller will injected at Bootstrap.

Answer 3

One important difference when providing a controller key to a directive is that the controller for that directive can be required by other directives for use. For example, here is a snippet of the two directives on the bottom of the AngularJS homepage:

app.directive('tabs', function() {
  return {
    // ...

    controller: function($scope, $element) {
      this.addPane = function() {
        // ...
      };
    },

    // ...
  };
});

app.directive('tab', function() {
  return {
    // ...

    // require the controller from the `tabs` directive
    // on a parent element
    require '^tabs',

    // required controller passed as fourth parameter
    link: function(scope, elem, attrs, tabsController) {
      tabsController.addPane(...);
    }
  };
});

<tabs>
  <tab>...</tab>
  <tab>...</tab>
</tabs>