如何对存储在不同路径中的两个不同控制器使用 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 一和 div 二。

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

我想要的如果用户首先点击 link 那么它应该显示 view2.html 的第一个 div

或者

如果用户点击第二个 link 那么它应该显示 view2.html 的 sencod div 视图二有自己的第二个控制器。我在这里被击中了。帮我解决这个问题。感谢你在期待。

Answer 1

我认为你不需要在这里发出，因为 firstCtrl 和 secondCtrl 是一个独立的控制器。如果您的范围之间没有 parent-child 关系，您可以将 $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>

parentCtrl

使用 $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;
 });

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

How to use $emit and $on of angularjs for two different controller stored in different path

angularjs

angularjs-scope

emit