如何在angularjs中将对象字段作为指令参数传递？

Question

我想将对象数组传递给指令，并让它打印出我在使用该指令的地方确定的字段。

这里的例子：

//directive 
app.directive('MyDirective', function() { 
    return { 
    restrict: 'A', 
    templateUrl: 'my-directive.html', 
    scope: { 
     items: '@', 
     field: '@' 
    } 
    }; 
}); 

// my-directive.html template 
<div ng-repeat="item in items">{{ item.field }}</div> 

的想法是，我可以与任何像这样的对象使用它：

// object arrays 
var phones = [{id:1,number:'555-5555'}, {id:2,number:'555-6666'}]; 
var persons = [{id:1,name:'John'}, {id:2,name:'Jane'}]; 


// directive usage 
<div my-directive items="phones" data-field="???number???"></div> 
<div my-directive items="persons" data-field="???name???"></div> 

结果应打印出编号和名称。这甚至在Javascript中可行吗？

Answer 1

可以，只要绑定的物品与 '='：

.directive('myDirective', function() { 
    return { 
    restrict: 'A', 
    template: '<div ng-repeat="item in items">{{ item[field] }}</div>', 
    scope: { 
     items: '=', 
     field: '@' 
    } 
    }; 
}) 

然后使用它是这样的：

<div my-directive items="phones" field="number"></div> 

看到这个plunker。

Answer 2

这并不需要一个指令，也许你正在寻找的指令是NG-重复：

var phones = [{id:1,number:'555-5555'}, {id:2,number:'555-6666'}]; 
var persons = [{id:1,name:'John'}, {id:2,name:'Jane'}]; 

<li ng-repeat="phone in phones">{{phone.number}}</li> 

<li ng-repeat="person in persons">{{person.name}}</li> 

Answer 3

是的，这是可能的，你可以做这样的：

指令：

myApp.directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     template: '<div ng-repeat="item in items">{{ getItemField(item) }}</div>', 
     scope: { 
      items: '=', 
      field: '@' 
     }, 
     link: function(scope, element, attr) { 
      scope.getItemField = function (item) { 
       return item[scope.field]; 
      }; 
     } 

     }; 

HTML：

<div my-directive items="phones" data-field="number"></div> 
<div my-directive items="persons" data-field="name"></div> 

Fiddle