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

问题描述

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

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

在 view1.html 中:

有Link2，如果单击它，它将被重定向到view2.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>

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

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' });
    };
 });

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

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

在 view2.html

有两个div.再说一格和二格.

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

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

我想要的内容如果用户单击第一个链接，则它应显示view2.html的第一个div

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

或

如果用户单击第二个链接，则它应显示view2.html的sencod div 查看两个有自己的Secnd控制器.我在这里被打中. 在此如何帮助我.感谢你在期待.

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.

推荐答案

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

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

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

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屋！