如何在ui-router状态加载上打开md-sidenav？ （没有锁定打开）

Question

我有一个md-sidenav应该在某些ui-router状态下打开但不应该在其他状态下打开。我希望它不仅可以 打开，还可以在状态之间启用/关闭动画。理想情况下，我希望有一个函数在加载状态/视图时打开sidenav。

我试着这样做：

<md-sidenav md-component-id="secondarySidenav" md-disable-backdrop ng-init="handleSecondary()">

功能检查$ state并相应地打开或关闭，但这根本不起作用，我想是无效的ng-init使用。

然后我这样做了：

<md-sidenav md-component-id="secondarySidenav" md-disable-backdrop md-is-open="handleSecondary()">

使用函数检查$ state并返回布尔值。它可以工作，但是sidenav被锁定打开或关闭，实际上不会在状态之间打开/关闭。

我也在控制器内部尝试了一些功能，但无法弄清楚如何在正确的时刻运行它们。加载$ state后是否有一些事件我可以将我的函数挂钩到？

如何使sidenav按预期动画？

Answer 1

我怀疑是因为你将md-is-open绑定到函数的返回值。这是md-is-open现在绑定的模型。

从该函数返回的模型永远不会改变（在简单的情况下）。相反，您应该绑定到范围上的变量。

像这样。

<md-sidenav md-component-id="secondarySidenav" md-disable-backdrop md-is-open="secondaryOpen">

使用您的函数操作变量

function exampleController($scope, $timeout) {
    $scope.secondaryOpen = false;


    // function for manipulating the sidenav, doesn't have
    // to be attached to $scope if it is not going to be called
    // outside of the enclosing controller func
    $scope.toggleSecondarySideNav = function() {
        $scope.secondaryOpen = !$scope.secondaryOpen;

        // in your function you would manipulate the
        // $scope.secondaryOpen based on the $state;
    }

    // every 5 seconds toggle the sidenav, again in
    // your instance you would just call the function
    $timeout($scope.toggleSecondarySideNav, 5000);
}
exampleController.$inject = ['$scope', '$timeout'];
angular
  .module('example-module')
  .controller('ExampleController', exampleController);