Question

我的控制器范围包含这样的数据，

    $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"
    }];

所有数组对象都有＆＃39;指令＆＃39;属性。我想为每个对象调用正确的指令。像这样;

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

当然这不会奏效。我该如何调用正确的指令？

Answer 1

如果您想拥有动态指令名称，则必须手动编译HTML。您可以为此创建一个辅助指令：

.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);
        }
    };
});

使用类似这样的东西：

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

演示： http://plnkr.co/edit/AjpfM1MqVvFFmykAqa9L?p=preview

Answer 2

您可以允许您的指令通过带有“restrict：'C'”

的类进行实例化

然后执行：

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

使用控制器范围数据调用指令

2 个答案: