[英]Controller variables don't update when using them in another controller of an mdPanel passed in via locals
I have a method in a controller called showFilterMenu(e)
which opens up an $mdPanel and passes the locals this.allOptions
and this.selectedOptions
in. 我在名为
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();
}
}
In my filter template file I make use of a directive, so I continue to pass through the locals from the MainController
: 在我的过滤器模板文件中,我使用了一条指令,因此我继续从
MainController
传递本地MainController
:
<multi-select-filter
options="filterCtrl.allOptions"
selected-options="filterCtrl.selectedOptions"
on-filter="filterCtrl.filter">
</multi-select-filter>
My directive has the following options set: 我的指令设置了以下选项:
//...
restrict = 'E';
template = MultiSelectFilterHtml;
controller = 'multiSelectFilterController';
controllerAs = 'multiSelectFilterCtrl';
bindToController = true;
replace = true;
scope = {
selectedOptions: '=',
options: '=',
onFilter: '='
};
and the MultiSelectFilterHtml
looks like: 而
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>
Everything works and initializes properly, but when selecting options in the list, they bubble back up to the filterController but then don't change in the MainController. 一切正常,并正确初始化,但是在列表中选择选项时,它们会冒泡回到filterController,但在MainController中不会更改。 It's acting like I am passing in a copy of this.allOptions and this.selectedOptions into the mdPanel.
就像我将this.allOptions和this.selectedOptions的副本传递到mdPanel中一样。
Basically when my model updates in the multi select filter directive, I want it to be modifying the selectedOptions of the MainController, since my filter method uses that variable when filtering and right now it is always an empty array. 基本上,当我的模型在multi select filter指令中更新时,我希望它修改MainController的selectedOptions,因为我的filter方法在过滤时使用该变量,现在它始终是一个空数组。
I must be missing something. 我肯定错过了什么。
It's difficult without a jsfiddle but I think your bindings are incorrect for the onFilter binding in the multiSelectFilter directive scope, try using '&' instead. 这是很难没有的jsfiddle,但我认为你的绑定是不正确的onFilter在multiSelectFilter指令范围结合,尝试使用“&”来代替。
this answer should give you more information https://stackoverflow.com/a/21714971/1248388 这个答案应该给您更多信息https://stackoverflow.com/a/21714971/1248388
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.