Question

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

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

我已在控制器 toolbarCtrl 中指定了对象 $ scope.menu.show ，该对象控制是否创建菜单。

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

当 toolbarCtrl 被初始化时，我可以控制是否显示菜单，但我想从另一个控制器控制它。在这种情况下，我在 mainCtrl 中创建了两个按钮，产生 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函数需要两个参数 - 事件和参数。

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"> ...

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

2 个答案: