スコープ上のmodel
プロパティに対して配列が渡されるかどうかに応じて、テキストボックスまたはドロップダウンを示す簡単なディレクティブを作成しようとしています。md-select insideディレクティブ内の複数にバインドする方法
multiple="false"
のようなディレクティブマークアップに明示的にfalse
を設定する以外は、複数選択ドロップダウンリストが表示されます。
なぜこれが機能しないのですか?また、md-selectの値バインディングが機能していない(テキストボックスのバインディングが機能しているにも関わらず)、私は同じ理由で疑わしい。
Plunkr available here illustrating the issue
消費者
<div ng-app='home' layout-padding layout="row">
<content-filter ng-repeat="filter in filters" flex="filter.width" model="filter.model" value="filter.value"></content-filter>
</div>
コンシューマーコントローラ
app.controller('MainCtrl', function($scope)
{
$scope.filters =
[
{
model:
{
multiSelect: false,
items:
[
{
label: 'All',
value: 'all'
},
{
label: 'Fail',
value: 'fail'
},
{
label: 'Success',
value: 'success'
}
]
},
value: 'all',
width: '50%'
},
{
value: '123',
width: '50%'
}
];
});
指令
app.directive('contentFilter', function()
{
return {
restrict: 'E',
replace: false,
template: '\
<md-input-container flex layout="fill" ng-if="model && model.items.length">\
<md-select ng-model="value" multiple="model.multiSelect === true">\
<md-option ng-repeat="item in model.items" ng-value="{{ item.value }}">{{ item.label }}</md-option>\
</md-select>\
</md-input-container>\
<md-input-container flex layout="fill" ng-if="!model">\
<input type="text" aria-label="{{ label }}" ng-model="value" />\
</md-input-container>',
scope:
{
value: '=',
model: '=?'
}
};
});
おかげで、それは意図したとおりに動作しないことを確認していただきありがとうございます。私がそれを動作させる他の唯一の方法は、リンク関数であり、テンプレートを要求し、それをコンパイルし、DOMに追加する前に条件付きで属性を追加することです。 – click2install