我在名为showFilterMenu(e)
的控制器中有一个方法,它打开$ mdPanel并传递本地this.allOptions
和this.selectedOptions
。
class MainController{
constructor(){
this.filterPanelRef;
this.allOptions = ['A', 'B', 'C'];
this.selectedOptions = [];
this.filter = () => {
// do some logic to filter down a list using this.selectedOptions against this.allOptions.
}
}
showFilterMenu(e){
this.filterPanelRef = this.$mdPanel.create({
attachTo: angular.element(document.body),
controller: 'filterController',
controllerAs: 'filterCtrl',
bindToController: true, //redundant since default is true
template: require('./filter/filter.html'),
locals: {
allOptions: this.allOptions,
selectedOptions: this.selectedOptions,
filter: this.filter
},
clickOutsideToClose: true,
escapeToClose: true,
focusOnOpen: true
});
this.filterPanelRef.open();
}
}
在我的过滤器模板文件中,我使用了一个指令,所以我继续从MainController
传递本地人:
<multi-select-filter
options="filterCtrl.allOptions"
selected-options="filterCtrl.selectedOptions"
on-filter="filterCtrl.filter">
</multi-select-filter>
我的指令设置了以下选项:
//...
restrict = 'E';
template = MultiSelectFilterHtml;
controller = 'multiSelectFilterController';
controllerAs = 'multiSelectFilterCtrl';
bindToController = true;
replace = true;
scope = {
selectedOptions: '=',
options: '=',
onFilter: '='
};
和MultiSelectFilterHtml
看起来像:
<md-input-container class="multi-select-filter" md-no-float>
<md-select
ng-change="multiSelectFilterCtrl.onFilter()"
ng-model="multiSelectFilterCtrl.selectedOptions"
multiple>
<md-option
ng-value="option"
ng-repeat="option in multiSelectFilterCtrl.options>
{{option}}
</md-option>
</md-select>
</md-input-container>
一切正常并初始化,但是当在列表中选择选项时,它们会回到filterController,但不会在MainController中更改。它就像我将this.allOptions和this.selectedOptions的副本传递给mdPanel。
基本上当我的模型在多选过滤器指令中更新时,我希望它修改MainController的selectedOptions,因为我的过滤方法在过滤时使用该变量,现在它总是一个空数组。
我一定错过了什么。
答案 0 :(得分:0)
没有jsfiddle很困难,但我认为你的绑定对于 multiSelectFilter 指令范围内的 onFilter 绑定是不正确的,请尝试使用'&amp;'代替。
这个答案可以为您提供更多信息https://stackoverflow.com/a/21714971/1248388