CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
FlyingCat
FlyingCat

Reputation: 14270

How to add controllers to a directive?

I am trying to create a directive in my app. However, I need to use directive in different places and they have their own controller.

so in my directive

directive('test', [function($popover) {
        return {
            restrict: 'E',
            scope: false,
            link: function(scope, elem, attrs) {

            }
        };
    }
])

How do I add two controllers to one directive?

Thanks!

Upvotes: 0

Views: 84

Answers (1)

PSL
PSL

Reputation: 123739

You could use name and controller="@" option.

.directive('test', [function($popover) {
        return {
            restrict: 'E',
            scope: false,
            controller : "@", 
            name:"controller",
            template:'<div>{{value}}</div>',
            link: function(scope, elem, attrs) {

            }
        };
    }

Ex:-

  <test controller="ctrl1"></test>
   .....
  <test controller="ctrl2"></test>

When you specify controller= '@' angular will look for the registered controller with the attribute value specified for the element's attribute (You can give any name for the attribute) mentioned in the name option.

Plnkr

Here is the snippet from angular directive implementation:-

         if (controllerDirectives) {
         ....

            controller = directive.controller;
            if (controller == '@') {
              controller = attrs[directive.name];
            }

            controllerInstance = $controller(controller, locals);

Upvotes: 1

Related Questions