Define a dynamic controller in an AngularJS directive?

Question

I have a directive that has a dynamic template, now I want the directive to have the ability to use different controllers. Is it possible to dynamically assign a controller to a directive? If possible, would that be the same "ctrlr" then passed to the link function?

.directive('myDirective',['$compile',function($compile){
    return {
        restrict: 'AE',
        replace: true,
        transclude: true,
        scope: {},
        templateUrl: function(el,attrs){
            return (angular.isDefined(attrs.template)) ? attrs.template : '/tmpls/default';
        },
        link : function(scope,el,attrs,ctrlr,transFn){
            [... Do Stuff Here ...]
        },
        controller: [ DYNAMIC CONTROLLER ASSIGNMENT?? ]
    };
}]);

By dynamic do you mean pull down an ambient controller (through require) or allow the controller to be set directly on the directive? — Davin Tryon
– Davin Tryon, Commented Nov 25, 2013 at 17:24
@DavinTryon I thought about using require but it won't work for my the situation I'm thinking of, it would mean encapsulating X amount of controllers in X amount of directives to associate with the directive I have in mind. I need to be able to set the controller directly. — m.e.conroy
– m.e.conroy, Commented Nov 25, 2013 at 19:19

RobM · Accepted Answer · 2014-04-23 16:12:30Z

15

While I didn't find the corresponding documentation for it in the official API, you can dynamically pass in the name of the controller you want to use by utilizing the "name" attribute in conjunction with providing the "controller" attribute with a value that uses the similar syntax you'd use for an isolate scope.

Using your sample code, assuming a controller called "myController":

HTML:

<my-directive ctrlr="myController"></my-directive>

JS:

.directive('myDirective',['$compile',function($compile){
    return {
        restrict: 'AE',
        replace: true,
        transclude: true,
        scope: {},
        templateUrl: function(el,attrs){
            return (angular.isDefined(attrs.template)) ? attrs.template : '/tmpls/default';
        },
        link : function(scope,el,attrs,ctrlr,transFn){
            [... Do Stuff Here ...]
        },
        controller: '@',
        name: 'ctrlr'
    };
}]);

answered Apr 23, 2014 at 16:12

RobM

3,6092 gold badges21 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

m.e.conroy Over a year ago

I'll try it but I don't think that was a possible property in the version of Angular at the time I wrote this question.

RobM Over a year ago

@m.e.conroy It's not a new thing... it was in the version that was current back in December. Which version were you using? Like I said, it's not documented, the property is available in the source -- and some courses teach the use of it. Wish I would have seen your question sooner. Hard to pick out the good questions, like this one, through the noise. :)

RobM Over a year ago

@m.e.conroy, did you use (try) this yet?

m.e.conroy Over a year ago

I ended up reformulating the application I was working on such that I didn't need to have dynamic controllers for my directives, been so busy that I haven't had a chance to test this solution. I'll give you the check and test it when I can.

MrViSiOn Over a year ago

@RobM What if "ctrlr" attributte has a variable? like this: <my-directive ctrlr="{{myController}}"></my-directive>? this isn't working

|

tanou · Accepted Answer · 2015-04-02 10:39:38Z

This is how it is done:

Inside your directive element all you need is an attribute which gives you access to the name of the controller:

<card-dealer ng-repeat="card in cards" card="card"></card-dealer>

in my case my card attribute holds a card object which has a name property.

In the directive you set the isolate scope to:

scope: { card: '=' }

This isolates and interpolates the card object to the directive scope. You then set the directive template to:

template: '<div ng-include="getTemplateUrl()"></div>'

this looks to the directive's controller for a function named getTemplateUrl and allows you to set the templateUrl dynamically as well.

In the directive controller the getTemplateUrl function looks like this:

controller: ['$scope', '$attrs', function ($scope, $attrs) {
  $scope.getTemplateUrl = function () { 
    return '/View/Card?cardName=' + $scope.card.name;
  };
}]

I have an mvc controller which links up the proper .cshtml file and handles security when this route is hit, but this would work with a regular angular route as well.

In the .cshtml/html file you set up your dynamic controller by simply putting

<div ng-controller="CardContactController"></div>

as the root element. The controller will differ for each template. This creates a hierarchy of controllers which allows you to apply additional logic to all cards in general, and then specific logic to each individual card. I still have to figure out how I'm going to handle my services but this approach allows you to create a dynamic templateUrl and dynamic controller for a directive using an ng-repeat based on the controller name alone. It is a very clean way of accomplishing this functionality and it is all self-contained.

Collectives™ on Stack Overflow

Define a dynamic controller in an AngularJS directive?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related