从另一个控制器管理 ng-if

Question

我已经准备了一个提供代码的 Plunkr：

https://plnkr.co/edit/WXtQxVcdgyvnaajbs4eJ?p=preview

我在控制器 toolbarCtrl 中分配了对象 $scope.menu.show 来控制是否创建菜单。

<md-menu id="menu" ng-controller="toolbarCtrl" ng-if="true"> ...

当 toolbarCtrl 被初始化时，我可以控制是否显示菜单，但我想从另一个控制器控制它。在这种情况下，我在 ma​​inCtrl 中创建了两个按钮，它们产生 true 或 false 并且我试图将值分配给 $ rootScope 但这不起作用。

我该怎么做？

更新： 虽然 jtmingus 解决方案完美运行，但我想出了另一个不需要事件的解决方案。

我创建了这个工厂服务：

app.factory('menuState', function () {
  var state = {val: false};
  function getState() {
    return state;
  }
  function setState(newState) {
    state.val = newState;
  }
  return {
    getState: getState,
    setState: setState
  }
});

然后在toolbarCtrl控制器我最初隐藏菜单

app.controller('toolbarCtrl', function($scope, menuState) {
  // hide the menu
  menuState.setState(false);

  // pass the value to the menu
  $scope.state = menuState.getState();
});

在 mainCtrl 上，我这样定义按钮点击：

app.controller('mainCtrl', function($scope, $rootScope, menuState) {
   $scope.state = menuState.setState;
});

main.html 上有 2 个按钮

<md-button class="md-primary md-raised" ng-click="setState(true)">Show</md-button>
<md-button class="md-primary md-raised" ng-click="setState(false)">Hide</md-button>

Answer 1

通常应通过控制器共享数据的方式是使用服务。因为您需要两个控制器来观察相同的状态，所以您可以使用 Angular 的事件，特别是 $on 事件。

这里有一篇文章将引导您了解如何让多个控制器查看相同的状态：

https://variadic.me/posts/2013-10-15-share-state-between-controllers-in-angularjs.html

编辑： 再看这篇文章后，我意识到这不是最好的解释，而且代码中有些东西不起作用。例如，如果您尝试通过 $broadcast 调用传入参数，$on 函数需要两个参数——event 和 args。

Answer 2

在您要开始显示菜单的控制器上，

app
.controller('MainCtrl', ['$scope', function($scope) {
     $scope.$broadcast('menu:show');
}])
.controller('ToolbarCtrl', ['$scope', function($scope) {
     var ToolbarCtrl = this;
     $scope.$on('menu:show', function() {
        ToolbarCtrl.showMenu = true;
     });
}])

在标记开关中使用这个值

<md-menu id="menu" ng-controller="ToolbarCtrl" ng-if="ToolbarCtrl.showMenu"> ...