javascript - 如何将变量注入子指令

Question

对于以下 angularjs 指令：

app = angular.module('ngApp');

app.value('objects', [
  {id: 1, name: 'Jane Doe', active: true},
  {id: 2, name: 'Test Biz', active: false},
  {id: 3, name: 'Another Business', active: false}
]);

app.directive('myDirective', function (objects) {
     return {
       template: '<ul></ul>',
       replace: true,
       compile: function(element, attrs) {
          for(var i=0;i<objects.length;i++) {
            element.append('<div other-directive object={{object}}></div>');
         }
       }
    };
})
.directive('otherDirecctive', function() {
   return {
     template: '<li>{{object.name}}',
     replace: true,
     scope: { object: '=' }
 });

还有这段html：

<div my-directive></div>

如何将每个对象传递到子指令中？有没有更好的整体方式来构建这段代码？

Answer 1

我建议ng-repeat在模板中只使用一个指令和线束：

app.directive('myDirective', function (objects) {
     return {
       link: function(scope,element,attrs){
           scope.objects = objects;    
       },
       template: '<ul><li ng-repeat="o in objects">{{o.name}}</li></ul>'
    };
});

但是如果你仍然想使用第二个指令，你可以按原样使用，只需将第一个的模板更改为：

'<ul><li ng-repeat="o in objects" other-directive object="o"></li></ul>'

演示： 这是一个小提琴