在通过本地传递的mdPanel的另一个控制器中使用它们时,控制器变量不会更新

时间:2017-10-26 19:17:03

标签: javascript angularjs angular-material

我在名为showFilterMenu(e)的控制器中有一个方法,它打开$ mdPanel并传递本地this.allOptionsthis.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,因为我的过滤方法在过滤时使用该变量,现在它总是一个空数组。

我一定错过了什么。

1 个答案:

答案 0 :(得分:0)

没有jsfiddle很困难,但我认为你的绑定对于 multiSelectFilter 指令范围内的 onFilter 绑定是不正确的,请尝试使用'&amp;'代替。

这个答案可以为您提供更多信息https://stackoverflow.com/a/21714971/1248388