angularjs - 根据 $scope 值在视图中加载角度指令

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