Question

我有三个自定义指令child1，child2，child3，我想使用另一个自定义指令在ng-repeat中从contoller重复。

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>

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

1 个答案: