Как передать поле объекта в качестве аргумента директивы в 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

Это не принимает директиву, вероятно, директива вы ищете нг-повторить:

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