如何在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