Как повторить и отобразить массив пользовательских директив в другой пользовательской директиве?

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>