angularjs - 如何在另一个自定义指令中重复和呈现自定义指令数组？

Question

我有三个自定义指令 child1、child2、child3，我想使用另一个自定义指令从 ng-repeat 中的控制器重复。

Answer 1

在控制器中获取数组并创建一个父自定义指令并将每个数组元素传递给父指令，然后在父指令中使用 $compile 编译并附加到 DOM。

控制器：

$scope.directiveArray=['child1','child2','child3'];

父指令：

angular.module('myApp').directive('parentDirective',function($compile){
   return {
            restrict:'AE',
            replace:true,
            link:function(scope,element,attribute){<br>
            var html=$compile("<"+attribute.childelem+"></"+attribute.childelem+">")(scope);
            element.append(html);
         }
       }
    });

其他三个指令：

angular.module('myApp').directive('child1',function(){
  return {
           restrict:'AE',
           template:'<h1>this is Child 1'
         }
    });

angular.module('myApp').directive('child2',function(){
  return {
           restrict:'AE',
           template:'<h1>this is Child 2'
         }
    });
angular.module('myApp').directive('child3',function(){
  return {
           restrict:'AE',
           template:'<h1>this is Child 3'
         }
       });

HTML：

<div ng-repeat="elem in directiveArray">
    <parent-directive childelem="{{elem}}"><parent-directive>
</div>