Динамические директивы AngularJS внутри ng-repeat

Question

Я пытаюсь динамически создавать директивы внутри ng-repeat. У меня есть directive-writer, который создает ряд других директив, но directive-writer, похоже, не выводит атрибуты директивы. Поэтому второй набор директив никогда не отображается.

См. this Plunker для полной демонстрации.

Короче у меня есть эта директива тег:

<div ng-repeat="dir in directives" directive-writer 
    directive-text="{{ dir.text }}" directive-type="{{ dir.directive }}"></div> 

Scope данные:

$scope.directives = [ 
    { directive: 'one', text: 'I am One' }, 
    { directive: 'two', text: 'I am Two' }, 
    { directive: 'three', text: 'I am Three' } 
]; 

определение Директива:

.directive('directiveWriter', function() { 
    return { 
     restrict: 'A', 
     compile: function(tElement, tAttrs) { 

      tElement.html('<div say="' + tAttrs.directiveText + '" ' 
       + tAttrs.directiveType + '>' + tAttrs.directiveType + '</div>'); 
     } 
    }; 

И еще 3 директивы все, как этот:

.directive('one', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     template: '<h3 class="one"></h3>', 
     compile: function(tElement, tAttrs) { 
      tElement.text('One says, ' + tAttrs.say); 
     } 
    }; 

Проблема заключается в directiveWriter не выписывает значение tAttrs.directiveType в качестве атрибута только в виде текста ...

Так тонированное HTML является:

<div say="I am One" {{ dir.directive }} class="ng-binding">one</div> 

Где «три» оказывается внутри div как текст без проблем, но никогда не отображается как атрибут.

Я не понимаю:

• Почему текст «три» может быть связан внутри DIV в виде текста, но не в качестве атрибута.
• Почему класс имеет значение «ng-binding».

Answer 1

Одна из проблем - это упорядочение атрибутов в html. Они доступны в рамках ранее в цикле Вот один из способов вы можете сделать это:

HTML:

<div directive-writer directive-text="dir.text" directive-type="dir.directive"></div> 

Директива:

angular.module('app').directive('directiveWriter', function($compile) { 
    return { 
     restrict: 'A', 
     scope:{ 
      directiveType:'=', 
      directiveText:'=' 
     }, 
     link:function(scope,elem, attrs){ 
      var template='<div say="' + scope.directiveText + '" ' + scope.directiveType + '>' + scope.directiveType + '</div>'; 
      template= $compile(template)(scope); 
      elem.replaceWith(template); 
     } 
    }; 
}); 

DEMO

Answer 2

Я изменил ваш пример. Теперь это работает. Вы должны использовать компиляцию $.

Смотреть это

(http://plnkr.co/edit/2pUzPClubLLBlfap8fhk?p=preview)