Question

这是我的代码：

<div ng-controller="mainCtrl">
    <button ng-click="onclick()"></button>
    <button ng-click="onclick()"></button>
    <button ng-click="onclick()"></button>
    {{display}}
</div>
<div ng-controller="SecondController">{{display}}</div>

<div ng-controller="lastController">{{display}}</div>

当用户点击按钮时，我必须在每个div中收到一些消息。

我尝试过以下代码：

app.controller('mainCtrl',function($scope,$rootScope){
    $scope.OnClick = function (msg) {
        $rootScope.$broadcast("firstEvent",{});
    }

    $scope.$on("firstEvent", function (msg ) {
        $scope.display = "hello world";
    });
});

app.controller('SecondController',function(  $scope){
    $scope.$on("firstEvent", function (msg) {
        $scope.display = "hello how Are you";
    });
});

app.controller('lastController',function($scope) {        
    $scope.$on("firstEvent", function (msg) {
        $scope.display = "this is my Query";
    });
});

当用户点击每个按钮时，它应该在每个div中获取数据。

如何只能使用$on，$event和$broadcast？

Answer 1

$ broadcast（）从父级向子级控制器发送均匀向下的内容。另一方面， $ emit（）方法正好相反。它从当前控制器向上发送一个事件到其所有父控制器。

这是控制器之间通信的一个简单示例

＆＃13;

angular.module("app", [])
  .controller("mainCtrl", [
    "$scope", "$rootScope",
    function($scope, $rootScope) {
      $scope.go = function(msg) {
        if (msg == 1) {
          $scope.display = "hello firstEvent";
        } else if (msg == 2) {
          $rootScope.$broadcast("showSomething", {});
        } else {
          $rootScope.$broadcast("showGoodBye", {});
        }
      };
    }
  ]).controller("SecondController", [
    "$scope", "$rootScope",
    function($scope, $rootScope) {
      $scope.$on("showSomething", function(msg) {
        $scope.display = "hello Something";
      });
    }
  ]).controller("ThirdController", [
    "$scope", "$rootScope",
    function($scope, $rootScope) {
      $scope.$on("showGoodBye", function(msg) {
        $scope.display = "hello GoodBye";
      });
    }
  ]);

＆＃13;

<div ng-app="app">
  <div ng-controller="mainCtrl">

    mainCtrl : {{display}}
    <br>
    <button ng-click="go(1)"> Show Hello </button>
    <button ng-click="go(2)"> Show Something </button>
    <button ng-click="go(3)"> Show GoodBye </button>

  </div>
  <hr>
  <div ng-controller="SecondController">

    SecondController : {{display}}

    <hr>


  </div>
  <div ng-controller="ThirdController">

    SecondController : {{display}}

    <hr>


  </div>
</div>

＆＃13;

A complete Tour

Answer 2

以下是解决方案：

我不想使用rootScope，您可以使用intermaeidate service 在两个controllers之间共享数据

服务解决方案：

以下是服务的展示方式：

app.service('StoreService',function(){
  var data;

  this.save=function(data){        
       this.data=data;

  };

  this.getData=function(){

    return this.data;

  };
});

使用service而不是rootScope

Demo without rootScope

rootScope

的解决方案

＆＃13;

var app = angular.module('myApp', []);
app.controller('mainCtrl',function($scope,$rootScope){
  $scope.buttonclick = function (msg) {
		var object = {
        data: msg
        }
        $rootScope.$broadcast("firstEvent",object);
    }
  $rootScope.$on("firstEvent", function (event, msg) {
  
     $scope.display = msg.data;
  });

})
app.controller('SecondController',function(  $scope, $rootScope){

  $rootScope.$on("firstEvent", function (event, msg) {
  
     $scope.display = msg.data;
  });
})
 app.controller('lastController',function(  $scope, $rootScope){

   $rootScope.$on("firstEvent", function (event, msg) {
  
     $scope.display = msg.data;
  });
})

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp">

<div ng-controller="mainCtrl">
<button ng-click="buttonclick('button1')">button1</button>
<button ng-click="buttonclick('button2')">button2</button>
<button ng-click="buttonclick('button3')">button3</button>
<br>
 {{display}}
</div>
<div ng-controller="SecondController">{{display}}</div>
<div ng-controller="lastController">{{display}}</div>


</div>

</body>
</html>

＆＃13;

请运行以上代码段

Here is a Working DEMO

如何在兄弟控制器之间进行通信？

2 个答案: