如何为存储在不同路径中的两个不同控制器使用 angularjs 的 $emit 和 $on

Question

我有两个视图及其对应的控制器。 说 view1.html 及其控制器 firstCntrl 和 view2.html 及其控制器 secndCntrl。

在view1.html中：

有Link2，点击后会跳转到view2.html。

<a href="#/view1" ng-click="emit()">Link1</a>  
<a href="#/view2" ng-click="emit()">Link2</a>

在 ng-click 中，我调用了 emit 函数，其中我将 $emit 定义为 firstCntrl.js

 app.controller("firstCntrl", function ($scope) {
    $scope.emit = function() {
      $scope.$emit('send', { message: 'true' });
    };
 });

我想从这里发送 true 并在 $on 中捕获它。

在 view2.html

有两个div。说 div 1 和 div 2。

<div ng-show="one">Hello</div>
<div ng-show="two">World</div>

我想要什么如果用户点击第一个链接，那么它应该显示 view2.html 的第一个 div

或者

如果用户点击第二个链接，那么它应该显示 view2.html 的 sencod div 视图二有他自己的Secnd控制器。我在这里感到震惊。 帮助我如何做到这一点。感谢你在期待。

Answer 1

我认为你不需要在这里发出，因为 firstCtrl 和 secondCtrl 是一个单独的控制器。如果您的范围之间没有父子关系，您可以将 $rootScope 注入控制器并将事件广播到所有子范围。

View1.html

<a href="#/view1" ng-click="broadcastMsg(1)">Link1</a>  
<a href="#/view2" ng-click="broadcastMsg(2)">Link2</a>

firstCtrl

app.controller("firstCntrl", function ($scope, $rootScope) {
    $scope.broadcastMsg = function(id) {
      if (id == 1) 
          $rootScope.$broadcast('send', 'One');
      else 
          $rootScope.$broadcast('send', 'Two');
    };
 });

View2.html

<div ng-show="showOne">Hello</div>
<div ng-show="!showOne">World</div>

parentCntrl

使用 $scope.on 而不是 $rootScope.on 来防止内存泄漏问题。

app.controller("parentCntrl", function ($scope, $rootScope) {
      $scope.$on('send', function (evt, message) {
            if (message == 'One') 
                $scope.showOne = true;
            else
                $scope.showOne = false;
      });
 });

secondCtrl

app.controller("secondCntrl", function ($scope) {
      $scope.showOne = $scope.$parent.showOne;
 });