2392 次
1 に答える
1
ディレクティブの主な問題は、直接評価されるため、 ngModel
andディレクティブで mustache バインディングを使用できないことです。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 に答える