Question

我有3个不同的指令，<one>，<two>，<three>。

我想循环遍历其ID并将其插入ng-repeat

<ul>
    <li ng-repeat="panel in panels">
        <panel>
            <!-- panel.id would give me "one", "two" etc. -->
            <!-- First insert <one> then <two> etc -->
        </panel>
    </li>
</ul>

我想要实现的结果是：

<ul>
    <li>
        <panel>
            <one></one>
        </panel>
    </li>
    <li>
        <panel>
            <two></two>
        </panel>
    </li>
    <li>
        <panel>
            <three></three>
        </panel>
    </li>
</ul>

因为每个人都有自己的模板：

<ul>
    <li>
        <div class="panel">
            <div id="one">
            </div>
        </div>
    </li>
    <li>
        <div class="panel">
            <div id="two">
            </div>
        </div>
    </li>
    <li>
        <div class="panel">
            <div id="three">
            </div>
        </div>
    </li>
</ul>

我不知道怎么做？这可能吗？我必须ng-compile在指令中有指令吗？

我应该只使用一个指令并使用ng-switch吗？

我错过了一种更简单的方法吗？

我知道这有效：

制定<panel-content>指令。

我将此包含在<panel>指令中：

制作

<ng-switch="panel.id">
    <ng-switch-when="one">
    <ng-switch-when="twp">
    <ng-switch-when="three">
</ng-switch>`

但这似乎很麻烦。

Answer 1

我通常这样做的方法是使用一个指令来选择链接函数中的特定指令。这可以防止所有ng-switch臃肿。

HTML

<panel type='one'></panel>
<panel type='two'></panel>

JS

angular.module('app').directive('panel', ['$compile', '$injector', function ($compile, $injector) {
    return {
        restrict: 'E',
        scope: {
            type: '='
        },
        link: function ($scope, element, attrs, vm) {
            var template;
            switch($scope.type){
                case 'one':
                    template = '<one></one>';
                    break;
                case 'two':
                    template = '<two></two>';
                    break;
            }
            element.html(template);
            $compile(element.contents())($scope);
        }
    };
}]);

这是一个显示实际行动的小提琴：http://jsfiddle.net/7cufjqs3/1/

Answer 2

如果您愿意在指令和panel元素之间使用额外的div，我创建了一个动态指令，该指令对元素的名称一无所知，并动态创建它：

<强>用法：

<li ng-repeat="panel in panels">       
    <panel>
       <dynamic-directive element="panel.id"></dynamic-directive>
    </panel>
</li>

<强>指令：

myApp.directive('dynamicDirective', function($compile) {
    return {
        restrict: "E",
        replace: true,
        template: "<div></div>",
        scope: {
            element: "="
        },

        link: function(scope, element, attrs) {
            var elm = '<' + scope.element + '></' + scope.element + '>';
            element.html(elm);
            $compile(element.contents())(scope);
        }
    }
});

Fiddle

Answer 3

我认为转换是最好的方法，因为它在你的html中最具可读性

<ul>
    <li ng-repeat="panel in panels">
        <panel ng-switch on="panel.id">
          <div ng-switch-when="one"><one>1</one></div>
          <div ng-switch-when="two"><two>2</two></div>
          <div ng-switch-when="three"><three>3</three></div>
        </panel>
    </li>
</ul>

http://plnkr.co/edit/ygy6coKCyQNGBoKmSES0?p=preview

重复并插入指令

3 个答案:

HTML

JS