如何将 angularjs 的 $emit 和 $on 用于存储在不同路径中的两个不同控制器 [英] How to use $emit and $on of angularjs for two different controller stored in different path

问题描述

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

在 view1.html 中:

如果点击链接2，它将被重定向到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="two">世界</div>

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

或

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

解决方案

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

View1.html

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

firstCtrl

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

View2.html

你好
<div ng-show="!showOne">世界</div>

parentCntrl

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

app.controller("parentCntrl", function ($scope, $rootScope) {$scope.$on('send', function (evt, message) {如果(消息=='一个')$scope.showOne = true;别的$scope.showOne = false;});});

secondCtrl

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

I have two views and its resp controller. Say view1.html and its controller firstCntrl and view2.html and its controller secndCntrl.

In view1.html:

There is Link2 which will be redirected to view2.html if it is clicked.

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

in ng-click I am calling emit function where I defined $emit as firstCntrl.js

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

I want to send true from here and catch it in $on.

In view2.html

There are two div. say div one and div two.

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

What I want that If user clicks on first link then it should show the first div of view2.html

Or

if user clicks on second link then it should show sencod div of view2.html View two have his own Secnd controller. I am struck here. Help me in this How to do this. Thanking you in anticipation.

解决方案

I think you don't need emit here since firstCtrl and secondCtrl is a separated controller. In case there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes.

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

Use $scope.on instead of $rootScope.on to prevent memory leak issue.

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 用于存储在不同路径中的两个不同控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！