CODEWITHSUNDEEP
angularjsangularjs-directive
levye
levye

Reputation: 552

Call directive using controller scope data

My controller scope have data like this,

    $scope.feeds = [{
        directive: 'photo-added',
        user: {
            ...
        },
        images: [
            {id: 150, image: "image.png"},
            {id: 151, image: "image.png"},
            {id: 152, image: "image.png"}
        ]
    },
    {
        directive: 'new-question',
        question_id : 5,
        title : "Call directive using controller scope data"
    }];

All array objects have 'directive' property. I want to call correct directive for each object. Like this;

    <div ng-repeat="feed in feeds">
        <{{feed.directive}} info="feed"></{{feed.directive}}>
    </div>

Of course this won't work. How can i call correct directive?

Upvotes: 3

Views: 64

Answers (2)

dfsq
dfsq

Reputation: 193261

You will have to manually compile HTML if you want to have dynamic directive names. You could create one more helper directive for this purpose:

.directive('directive', function($compile) {
    return {
        scope: {info: '='},
        link: function(scope, element) {
            var attrs = {info: 'info'};
            attrs[scope.info.directive] = '';
            element.attr(attrs).removeAttr('directive');
            $compile(element)(scope);
        }
    };
});

and use it something like this:

<div ng-repeat="feed in feeds">
    <div directive info="feed"></div>
</div>

Demo: http://plnkr.co/edit/AjpfM1MqVvFFmykAqa9L?p=preview

Upvotes: 1

Gatsbill
Gatsbill

Reputation: 1790

You can allow your directive to be instantiate via class with "restrict: 'C'"

and then do: 

<div ng-repeat="feed in feeds">
        <div ng-class="feed.directive" info="feed"></div>
</div>

Upvotes: 0

Related Questions