AngularJS：將對象屬性名稱傳遞給指令

Question

我在寫一個angular.js指令，它是一個對象數組的可重用輸入組件。

由於不可能在ng-repeat使用原始值（參見：What is the angularjs way to databind many inputs?），我要對象的數組傳遞到部件：

在控制器I初始化：

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

而

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

指令本身是這樣實現的：然後在HTML文件中使用它

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

這一切都很好。

我的問題：如果物體沒有value會怎麼樣？

此指令編碼屬性的名稱（value）硬。但是，如果我想要這樣一個數組：[{ name: 'Bart' }, { name: 'Lisa' }]。

是否可以傳遞對象的名稱，例如：像

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

，並以某種方式使用它的指令來訪問name財產？

這裏是我創建的JSFiddle http://jsfiddle.net/napU6/5/以顯示此指令。

Answer 1

使用其他屬性來傳遞屬性

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

指令

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

演示的名稱：Plunker