Как создать несколько экземпляров `directive` с разными данными в нем

Question

У меня есть данные в $scope, в соответствии с объемом classNames count, мне нужно создать элементы на странице с различными данными из scope. как это сделать?

Я пытаюсь добавить еще номер directive, но я вижу только один выход. и я не могу передать данные $scope.

Каков правильный способ сделать это?

Вот моя попытка:

<div class="wrapper" ng-app="myApp"> 
    <div class="helloWorld" ng-controller="hello"> 
     <ul> 
      <li ng-repeat="item in items"> 
       {{item.name}} 
      </li> 
     </ul> 
     <hello-world/> //added multiple times 
     <hello-world/> 
     <hello-world/> 
     <hello-world/> 
     <hello-world/> 
    </div> 

</div> 

var app = angular.module('myApp', []); 

app.controller('hello', function ($scope) { 
    $scope.items = [ 
     {name:'name1', className:'green'}, 
     {name:'name2', className:'blue'}, 
     {name:'name3', className:'brown'}, 
     {name:'name4', className:'yellow'}, 
     {name:'name5', className:'red'} 
    ]; 
}); 

app.directive('helloWorld', function() { 
     return { 
      restrict: 'AE', 
      replace: 'true', 
      template: '<h3 class="{item.className}">Hello World!! from color of {{item.className}}</h3>', 
      scope: { 
       className: '@' 
      }, 
      link : function ($scope, elem, attr) { 
      } 
     } 
}); 

jsfiddle

любой может помочь мне понять концепцию и создать несколько экземпляров директивы здесь?

Заранее спасибо.

Answer 1

Проблема в том, что вы не закрывали директивы должным образом. Директива тега не может быть самозакрывающейся по определению. Итак, что происходит, когда вы пишете <hello-world />, так это то, что тег остается открытым, а последующие директивы не анализируются.

Оно должно быть:

<hello-world></hello-world> 
<hello-world></hello-world> 
<hello-world></hello-world> 
<hello-world></hello-world> 
<hello-world></hello-world> 

Демо:http://jsfiddle.net/ydkezd15/2/

Answer 2

..Я пытаюсь добавить еще No.of директивы элемента, но я вижу только один выход .

Прежде всего, вам необходимо закрыть соответствующий указатель. Используйте So <hello-world><hello-world/> вместо <hello-world/>. Кроме того, поместите директиву в ng-repeat, чтобы получить несколько элементов.

 <li ng-repeat="item in items"> 
      {{item.name}} 
      <hello-world class-name="{{item.className}}"></hello-world> 
     </li> 

и я не в состоянии передать данные $ области действия на него.

Это потому, что вы создали «изолированный объем» для своей директивы!

scope: { 
     className: '@' 
     } 

@ знак означает, что className в изолированном объеме получит свое значение из атрибута class-name в директиве

app.directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     replace: 'true', 
     template: '<h3>Hello World!! from color of "{{className}}"</h3>', 
     scope: { 
      className: '@' 
     }, 
     link: function ($scope, elem, attr) {} 
    } 
}) 

Вот в dmeo