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

我有一个指令定义为

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

然后像这样从主视图中包含它

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

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

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

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

---

然而，当我将上面生成的代码直接输入到主模板中时，它会加载指令。怎么会？我怎样才能让它工作呢？

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

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

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

Application.directions.directive（'loaddirective'，function（$compile）{
返回{
限制：“A”，
作用域：{loaddirective:“=loaddirective”}，
链接：函数（$scope、$element、$attr）{
var值=$scope.loaddirective；
如果（值）{
//加载指令并使其处于反应状态
$element.html（“”）；
$compile（$element.contents（））（$scope）；
}
},
替换：正确
};
});

我把它放在github上：