Question

我正在使用Angular Material组件框架。

如果调整大小到某个宽度，我已经定义了一个名为sidebar的md-sidenav页面，该页面会自动显示（在屏幕左侧）。这可以归功于指令md-is-locked-open="$mdMedia('gt-sm')"。

我尝试实现的目标看起来非常简单：我只想知道（触发事件）sidenav被显示/隐藏（由用户或自动）。我尝试了几种不同的解决方案，但似乎没有任何效果。

我有plunker，其行为与我想要实现的行为相同。在activate函数中，我尝试捕获事件（或者我认为会发生的事件，似乎不是因为它不起作用）。

我尝试了几乎所有给出here和here的解决方案，但没有运气（特别是在自动显示/隐藏sidenav时）。

这里有什么想法吗？

非常感谢！

Answer 1

您可以在控制器中使用$mdMedia服务，而不是在视图中。来自documentation

将在调整大小时重新评估媒体查询，以便您注册观看。

因此，您可以为所需的媒体查询大小注册一个观察者，然后在观察者触发时调用一个函数：

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

然后我按照以下方式设置sideNav：

md-is-locked-open="showSideNav"

这是working example，来自您的Plunker

切换md-sidenav时捕获事件（使用md-is-locked-open）

1 个答案: