Question

我想在另一个控制器中更改ng-show而不是ng-show。

myApp.controller('popupCtrl', function() {});

myApp.controller('changePopup', function($rootScope){
  // now i wanna show my Ppopup
  $rootScope.popup = true;
});

<div ng-controller="popupCtrl">
  <div ng-show="popup">
    Popuptext
  </div>
</div>

但这不起作用......我该如何解决？谢谢！

Answer 1

首先，你永远不应该添加$rootScope或改变它。它由角度团队优化。

第二件事，没有必要涉及$rootScope。

这是一个显示如何跨两个控制器进行通信的demo。

关键是事件聚合器模式：

Communicator.register(function (newValue) {
    vm.value = Communicator.value;
});

我在Communicator中创建了一个函数来注册回调函数。目标是当值被更改时，将触发回调函数。即触发事件（更改事件）。

第二个关键部分是关闭事件的火灾：

Communicator.change(!Communicator.value);

在这里，我们向change函数传递一个新值，它将执行两项操作：

更新内部值以便我们跟踪它
遍历所有已注册的回调并执行它们传递新值。

通过实现这种模式，我们可以最小化我们在应用程序周围进行通信的程度（$rootScope可能会在您$broadcast时倾向于遍历范围。

现在我们可以更密切地遵循单一责任原则。我们的班级在其目前的范围内被恰当地命名，当我们看到这个工厂我们可以告诉它应该“沟通”。

最后，使用全局事件聚合器模式（$rootScope），跟踪这些事件的广播位置以及它们最终会在何处进行跟踪要困难得多。这里我们没有那个问题

Answer 2

解决此问题的一种方法是使用$ rootScope。$ broadcast

以下是一个示例：http://plnkr.co/edit/EmJnZvXFRWv6vjKF7QCd

var myApp = angular.module('myApp', []);


myApp.controller('popupCtrl', ['$rootScope', '$scope', function($rootScope,$scope) {

 $scope.popup = false;

 $rootScope.$on('changePopup', function(event, data) {
  $scope.popup = !$scope.popup;
});


}]);

myApp.controller('changePopup', ['$rootScope', '$scope', function($rootScope, $scope) {

$scope.changePopup = function() {
$rootScope.$broadcast('changePopup', 'data could be sent here');
}
}]);

查看：

<div ng-controller="popupCtrl">
<div ng-show="popup">
  Popuptext
</div>

<div ng-controller="changePopup">
<button ng-click="changePopup()">Change the popup</button>
</div>

如果您正在处理大型应用程序，使用服务/工厂是交叉控制器通信的更好解决方案，但对于较小的应用程序，我会说使用$ broadcast，$ emit和$ on就足够了。

Answer 3

这是一个适合您的工作演示 - 抱歉，我更改了控制器名称，但我相信您将能够在此基础上进行构建。祝你好运

angular.module('myApp', [])
  .controller('c1', function($scope) {
    // now i wanna show my Ppopup
    $scope.popup = false;
    $scope.$on('popup', function() {
      $scope.popup = true;
    });

  })
  .controller('changepopup', function($rootScope, $scope) {
    // now i wanna show my Ppopup
    $scope.clicker = function() {
      $rootScope.$broadcast('popup')
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="c1">
    <div ng-show="popup">
      Popuptext
    </div>
  </div>

  <button ng-controller="changepopup" ng-click="clicker()">Click me</button>
</div>

在另一个控制器中更改ng-show？

3 个答案: