Dynamically Attaching controllers to a directive

In AngularJS, directives are a powerful feature that allows developers to create reusable components. One of the advanced uses of directives is the ability to dynamically attach controllers to them. This guide will walk you through the process of dynamically attaching controllers to an AngularJS directive.

Understanding Directives and Controllers

In AngularJS, a directive is a marker on a DOM element that tells AngularJS’s HTML compiler to attach a specified behavior to that DOM element. A controller, on the other hand, is a JavaScript object containing attributes/properties and functions. It is responsible for building a model for the view to display.

Dynamically Attaching Controllers to a Directive

The dynamic attachment of controllers to a directive is achieved by specifying the directive’s controller via an attribute. This approach requires the directive to have an isolated scope, which is a scope that is not prototypically inherited from the parent scope.

Here’s an example of a directive with two controllers:

var testApp = angular.module('testApp',[]);

testApp.controller('controllerOne', function($scope){
  $scope.ctrlHits = 0;
  $scope.displaytext = 'Click to see the name of the controller used.';
  $scope.invoked = function(){
    $scope.displaytext = 'controllerOne Hits';
    $scope.ctrlHits++;
  }
});

testApp.controller('controllerTwo', function($scope){
  $scope.ctrlHits = 0;
  $scope.displaytext = 'Type in to see the name of the controller used.';
  $scope.invoked = function(){
    $scope.displaytext = 'controllerTwo hits';
    $scope.ctrlHits++;
  }
});

testApp.directive('myDirective', function(){
  return {
    restrict:'E',
    scope:{},
    template:'<label>My Directive: <input type="button" value="click me" class="btn btn-success" ng-model="userinput" ng-click="invoked()" class="form-control"/></label>'
    +'<p>{{displaytext}} : {{ctrlHits}}</p>',
    controller:'@',
    name:'ctrlName'
  }
});

In the above example, the myDirective directive is set to use a controller specified by the ctrlName attribute. The controller:'@' line in the directive definition object tells AngularJS that the controller is passed as an attribute. The name:'ctrlName' line specifies the name of the attribute.

Using the Directive with Different Controllers

You can use the same directive with different controllers by specifying the controller name in the ctrlName attribute. Here’s an example:

<my-directive ctrl-name="controllerOne"></my-directive>
<my-directive ctrl-name="controllerTwo"></my-directive>

In the above example, the first my-directive uses controllerOne, and the second my-directive uses controllerTwo.

Conclusion

Dynamically attaching controllers to a directive is a powerful feature of AngularJS that allows for greater flexibility and reusability in your code. By understanding how to use this feature, you can create more modular and maintainable AngularJS applications.