Javascript 来自指令的动态指令'；s模板

我想根据指令名数组在页面中加载指令

在我的主页中：

<div component-loader></div>

myApp.directive('componentLoader', function($compile) {
    var component = function(scope, element, attrs) {
        $compile(element.contents())(scope);
    }

    return {
        link:           component,
        replace:        true,
        scope:          true,
        template:       '<div ng-repeat="component in components"><div {{component.directive}}></div></div>'
    };
});

$scope.components = [{
    directive:  'directive01'
},{
    directive:  'directive02'
}]

<div directive01></div>
<div directive02></div>

<div {{component.directive}}></div>
<div {{component.directive}}></div>

我所期待的：

<div component-loader></div>

myApp.directive('componentLoader', function($compile) {
    var component = function(scope, element, attrs) {
        $compile(element.contents())(scope);
    }

    return {
        link:           component,
        replace:        true,
        scope:          true,
        template:       '<div ng-repeat="component in components"><div {{component.directive}}></div></div>'
    };
});

$scope.components = [{
    directive:  'directive01'
},{
    directive:  'directive02'
}]

<div directive01></div>
<div directive02></div>

<div {{component.directive}}></div>
<div {{component.directive}}></div>

我得到了什么：

<div component-loader></div>

myApp.directive('componentLoader', function($compile) {
    var component = function(scope, element, attrs) {
        $compile(element.contents())(scope);
    }

    return {
        link:           component,
        replace:        true,
        scope:          true,
        template:       '<div ng-repeat="component in components"><div {{component.directive}}></div></div>'
    };
});

$scope.components = [{
    directive:  'directive01'
},{
    directive:  'directive02'
}]

<div directive01></div>
<div directive02></div>

<div {{component.directive}}></div>
<div {{component.directive}}></div>

我做错了什么

---

谢谢

绑定只适用于属性内容，而不适用于属性名称（据我所知）。 相反，您可以使用一个无模板指令，在link函数中生成元素

<div component-loader="components"></div>

---

仍然不是理想的解决方案，但它符合我的要求：

myApp.directive('componentLoader', function($compile) {
    var component = function(scope, element, attrs) {

        scope.$watchCollection('components', function(a, b) {
            var code = '';
            var i;
            for (i=0;i<scope.components.length;i++) {
                code += '<div '+scope.components[i].directive+'></div>'
            }
            element.html($compile(code)(scope));

        });

    }

    return {
        link:           component,
        scope:          true
    };
});

myApp.directive（'componentLoader'，function（$compile）{ 变量组件=函数（范围、元素、属性）{ 范围$watchCollection（'组件'），功能（a，b）{ var代码=“”； var i；

---

对于（i=0；iThanks），这是一个有效的解决方案。