AngularJS: passaggio del nome della proprietà dell'oggetto alla direttiva

Question

Sto scrivendo una direttiva angular.js che è un componente di input riutilizzabile per una matrice di oggetti.

Poiché è possibile utilizzare valori primitivi in ​​ng-repeat (vedi: What is the angularjs way to databind many inputs?), devo passare un array di oggetti al componente:

Nel regolatore inizializzo:

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

E quindi utilizzarlo nel file HTML:

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

la stessa direttiva è implementato in questo modo:

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>' 
}; 
}); 

Questo funziona tutto bene.

La mia domanda: cosa succede se gli oggetti non hanno un value?

Questa direttiva codifica il nome della proprietà (value) difficile. Ma cosa, se voglio avere una matrice come questa: [{ name: 'Bart' }, { name: 'Lisa' }].

È possibile passare il nome dell'oggetto, ad es. come

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

e utilizzarlo in qualche modo nella direttiva per accedere alla proprietà name?

Ecco il JSFiddle http://jsfiddle.net/napU6/5/ che ho creato per mostrare questa direttiva.

Answer 1

Utilizzare un altro attributo per passare il nome della proprietà

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

direttiva

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