打开后停止 $mdPanel 控制器调用答案

【问题标题】：Stop $mdPanel controller invoking once opened打开后停止 $mdPanel 控制器调用
【发布时间】：2020-05-04 03:53:24
【问题描述】：

在我的 AngularJS 应用程序中，我使用 $mdPanelservice 来提供过滤器面板。该服务在用户点击一个按钮时被调用，当用户选择一个过滤选项时，它会更新表格，并在表格的标题中提供一个过滤芯片（用户可以看到他们选择了什么）。

查看表格

<md-button data-ng-click="$ctrl.showFilter($event)">
     Filter
</md-button>

查看过滤器面板

<div>
    <md-list ng-repeat="cat in categories">

    </md-list>
    <div>
        <md-button data-ng-click="closeDialog();">
            Close
        </md-button>
    </div>
</div>

控制器

var panelRef;

function showFilter($event) {
    var config = {
        attachTo: angular.element(document.body),
        controller: ['mdPanelRef', '$scope', function(mdPanelRef, $scope) {

          //LOGIC TO FILTER TABLE DATA AND PROVIDE SELECTED FILTER OPTION GOES HERE

        }],
        controllerAs: '$ctrl',
        targetEvent: $event,
        templateUrl: 'app/templates/portfolio/filter-panel.tpl.htm',
        clickOutsideToClose: true,
        escapeToClose: true,
    };

    $mdPanel.open(config)
    .then(
        function(result) {
            panelRef = result;
        },
        function(error){

        }
    );
}

问题是当过滤器面板通过调用showFilter打开，然后关闭，广告然后再次重新打开时，再次调用服务，调用一个新实例并重置保存在mdPanel配置中的所有值控制器，重置过滤器选项，我不想要。

问题

如何在初始打开时维护mdPanel 的单个实例？用户可以根据需要打开和关闭它，但控制器中的所有值都会保存

【问题讨论】：

标签： javascript angularjs angularjs-material

【解决方案1】：

您可以尝试将过滤后的数据存储在您的父控制器中。

(parent controller)
$scope.filterData = {};

然后用showFilter($event)函数传递过滤数据。

(view -table)
<md-button data-ng-click="$ctrl.showFilter($event, filterData)">
 Filter
</md-button>

然后尝试在配置文件中使用locals。

(panel controller)
var panelRef;

function showFilter($event, filterData) {
    var config = {
        attachTo: angular.element(document.body),
        controller: ['mdPanelRef', '$scope', 'filterData' function(mdPanelRef, $scope, filterData) {

          //LOGIC TO FILTER TABLE DATA AND PROVIDE SELECTED FILTER OPTION GOES HERE

        }],
        controllerAs: '$ctrl',
        targetEvent: $event,
        templateUrl: 'app/templates/portfolio/filter-panel.tpl.htm',
        clickOutsideToClose: true,
        escapeToClose: true,
        locals: {
            filterData: filterData //add local
        }
    };

    $mdPanel.open(config)
    .then(
        function(result) {
            panelRef = result;
        },
        function(error){

        }
    );
}

【讨论】：