问问题
2392 次
1 回答
1
您的指令的主要问题是您不能在ngModel
和ngOptions
指令中使用胡子绑定,因为它们是直接评估的。您可以直接绑定到作用域属性(ngModel 和 alloptionsModel):
directive('dimension', function() {
return {
restrict: 'E',
scope: {
ngModel: '=',
alloptionsModel: '='
},
template:
'<div>' +
'<label ng-transclude></label>' +
'<fieldset>' +
'<div class="form-group">' +
'<select ng-model="ngModel" ng-options="x for x in alloptionsModel" multiple class="form-control"></select>' +
'</div>' +
'</fieldset>' +
'</div>',
replace: true,
transclude: true
};
});
有关工作示例,请参阅此 plunkr 。
编辑
至于编译路线,没有错。当您需要动态创建一个模板时,它很有用,当您访问select
的项目模板时,这显然是您的情况。
compile: function(tElement, tAttrs) {
var select = tElement.find('select'),
value = tAttrs.value ? 'x.' + tAttrs.value : 'x',
label = tAttrs.label ? 'x.' + tAttrs.label : 'x',
ngOptions = value + ' as ' + label + ' for x in alloptionsModel';
select.attr('ng-options', ngOptions);
}
// In the HTML file
<dimension ng-model="inputs.users"
alloptions-model="allusers"
label="name">
Users
</dimension>
我已经用编译功能更新了plunkr 。
于 2013-08-16T12:56:26.960 回答