AngularJS: Przekazywanie nazwy właściwości obiektu do dyrektywy

Question

Piszę dyrektywę angular.js, która jest składnikiem wejściowym wielokrotnego użytku dla tablicy obiektów.

Ponieważ jest to niemożliwe, aby użyć wartości prymitywne w ng-repeat (patrz: What is the angularjs way to databind many inputs?), muszę przekazać tablicę obiektów do komponentu:

W regulatorze zainicjować:

$scope.theSimpsons = [{ value: 'Bart' }, { value: 'Lisa' }]; 

I następnie używać go w pliku HTML:

<div ng-app="App"> 
    <div ng-controller="AppCtrl"> 
     <multi-input items="theSimpsons" /> 
    </div> 
</div> 

sama dyrektywa jest realizowany tak:

directive('multiInput', function() { 
return { 
    restrict: 'E', 
    scope: { 
     items: '=items' 
    }, 
    template: 
     '<div>' + 
     '<div ng-repeat="item in items">' + 
     '<input type="text" ng-model="item.value">' + 
     '<a ng-click="items.splice($index, 1)">remove</a>' + 
     '</div>' + 
     '<a ng-click="items.push({value:\'\'})">add</a>' + 
     '</div>' 
}; 
}); 

To wszystko działa dobrze.

Moje pytanie: co zrobić, jeśli obiekty nie mają numeru value?

Ta dyrektywa koduje nazwę nieruchomości (value). Ale co, jeśli chcę mieć tablicę taką jak ta: [{ name: 'Bart' }, { name: 'Lisa' }].

Czy można przekazać nazwę obiektu, np. jak

<multi-input items="names" property="name"></multi-input> 

i używać go jakoś w dyrektywie dostępu do właściwości name?

Oto JSFiddle http://jsfiddle.net/napU6/5/ Stworzyłem, aby pokazać tę dyrektywę.

Answer 1

Użyj innego atrybutu przekazać nazwę właściwości

<multi-input items="myItems" name="value"></multi-input> 

dyrektywa

app.directive('multiInput', function(){ 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     items:'=', 
     name: '@' 
    }, 
    template:'<div>' 
     + '<div ng-repeat="item in items">' 
     + '<input type="text" ng-model="item[name]">' 
     + '<a ng-click="items.splice($index, 1)">remove</a>' 
     + '</div>' 
     + '<a ng-click="items.push({})">add</a>' 
     + '</div>' 
    } 
}); 

Demo: Plunker