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