在md-sidenav被切换时捕获事件(使用md-is-locked-open)

Question

我使用的是Angular Material组件框架。

我定义了一个名为sidebar的带有md-sidenav的页面，如果将其调整为一定的宽度，则会自动显示(在屏幕左侧)。这是可能的多亏指令md-is-locked-open="$mdMedia('gt-sm')"。

我想要实现的似乎很简单:我只是想知道(有一个事件触发)当sidenav被显示/隐藏(由用户，或自动)。我尝试了几种不同的解决方案，但似乎都不起作用。

我有一个活塞，具有相同的行为，我正在努力实现。在activate函数中，我试图捕获事件(或者我认为会是事件，似乎不是这样，因为它不起作用)。

我尝试了这里和这里给出的几乎所有解决方案，但没有运气(特别是当自动显示/隐藏sidenav时)。

有什么想法吗?

非常感谢!

Answer 1

您可以在控制器中而不是在视图中使用$mdMedia服务。从文档

媒体查询将在调整大小时重新评估，允许您注册一个手表。

因此，您可以为所需的媒体查询大小注册一个监视程序，然后在监视程序触发时调用一个函数:

$scope.$watch(function(){return $mdMedia('gt-sm');}, function(){
    $scope.showSideNav = !$scope.showSideNav;
    console.log("SideNav State Change");
});

然后我像这样设置sideNav:

md-is-locked-open="showSideNav"

这是一个工作的例子，从你的Plunker