Question

我有一个定义为

的指令

Application.Directives.directive('listview', function() {
    return {
        restrict: 'EAC',
        templateUrl: 'directives/listview/view.html'
    };
});

然后想要从主视图中包含它，就像这样

<div class="{{directiveName}}">
</div>

其中directiveName等于“listview”。但是，它不起作用。它生成以下代码，但listview指令不会被加载

<div class="listview">
</div>

然而，当我将上面生成的代码直接输入主模板时，加载指令。怎么会？我怎样才能使它发挥作用？

Answer 1

所以我找到了办法。你想要的是这样的东西

<div {{directiveNameInScope}}></div>

但同样，这不起作用。所以我创建了一个指令来为你做。它就像

一样

<div loaddirective="directiveNameInScope"></div>

loaddirective指令看起来像

Application.Directives.directive('loaddirective', function($compile) {
    return {
        restrict: 'A',
        scope: { loaddirective : "=loaddirective" },
        link: function($scope, $element, $attr) {
            var value = $scope.loaddirective;
            if (value) {
                // Load the directive and make it reactive
                $element.html("<div "+value+"></div>");
                $compile($element.contents())($scope);
            }
        },
        replace: true
    };
});

我把它放在github上：https://github.com/willemmulder/loaddirective

在视图中加载角度指令，基于$ scope值

1 个答案: