指令模板中的動態指令

Question

我想基於指令名稱數組在頁面中加載指令。

在我的主頁上：

<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>

我究竟做錯了什么？

謝謝！

Answer 1

綁定僅適用於屬性內容，不適用於屬性名稱（據我所知）。 取而代之的是，您可以使用一個無模板指令，並在鏈接函數中生成元素。

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

您的鏈接功能

function(scope, element, attrs) {
    var components = attrs.componentsLoader;
    // Or use scope.components or scope.$parent.components depending on
    // how your scopes are organised

    angular.forEach(components, function (component) {
        element.append(angular.element().attr(component.directive, '');
    });        

    $compile(element.contents())(scope);
}

Answer 2

仍然不是理想的解決方案，但是可以滿足我的要求：

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