Angular Material $mdPanel 没有 close() 方法答案

【问题标题】：Angular Material $mdPanel doesn't have a close() methodAngular Material $mdPanel 没有 close() 方法
【发布时间】：2017-03-16 16:44:27
【问题描述】：

我正在使用有角度的材料 $mdPanel，我可以使用 open() 方法显示它，但我无法删除它（使用类似演示的关闭按钮）。文档对此并不清楚， close 方法不起作用。有什么解决办法吗？

$mdPanel documentation

【问题讨论】：

GHA 有什么反馈或建议吗？

标签： javascript angularjs angular-material

【解决方案1】：

当您调用$mdPanel.open() 时，它会返回一个承诺。对 promise 的调用包含对已创建面板的引用。你可以打电话给close()。

$res = $mdPanel.open(...);
$res.then(function(ref) {
    $scope.ref = ref;
})

稍后，关闭，调用：

$scope.ref.close();

【讨论】：

我不清楚 $scope 的来源。您如何在 promise 的 then 部分引用 mdPanel 的范围？
你必须注入 $scope 或 $rootScope。

【解决方案2】：

$mdPanel 上没有 close() 方法，而是面板引用上的一个方法，该方法通过第一个参数传递给该面板的控制器。因此，为了能够关闭面板，您需要在面板定义中传递一个控制器函数，如下所示。

希望这会有所帮助！

var config = {
    ...,
    controller: PanelController,
    controllerAs: 'panelCtrl',
    template: '<div><div>Some content</div><button ng-click="panelCtrl.close()">Close</button></div>',
    ...
};

function PanelController(panelRef) {
    this.close = function () {
        panelRef && panelRef.close();
    };
}

【讨论】：

【解决方案3】：

您可以在控制器中注入mdPanelRef，然后调用mdPanelRef.close()

var config = {
    ...,
    controller: PanelController

};

function PanelController(mdPanelRef) {
    this.close = function () {
        mdPanelRef.close();
    };
}

【讨论】：