如何在AngularJs的两个不同的模块控制器之间进行通信 [英] How to communicate between controllers of two different modules in AngularJs

问题描述

我想知道在AngularJS两个不同的控制器之间可我们沟通。假设我有两个模块，结果
Plunker： http://plnkr.co/edit/if0MQwlx9WHrD8XnMi2t?p=$p$pview

  1，VAR应用= angular.module（'fistModule'，[]）;
           app.controller（'第一'，函数（$范围）{
                $ scope.firstMethod =功能（）{
                 //我的code}
}）
    2.变种NEWAPP = angular.module（'secondModule，[]'）;
           newapp.controller（'第二'，函数（$范围）{
              $ scope.secondMethod =功能（）{
               //我的code}
 

有方式的两个不同的模块控制器之间的通信。

我的code：
JS：

  angular.module（'对myApp'，[]）
  .controller（'ParentCtrl'，['$范围'，
    功能（$范围）{      $ scope.message =儿童从父控制器更新;      $ scope.clickFunction =功能（）{
        $ $范围广播（'update_parent_controller'，$ scope.message）。
      };
    }
  ]）;
  angular.module（'myNewApp'，[]）
  .controller（'ChildCtrl'，['$范围'，
    功能（$范围）{
      $ scope.message =儿童控制器中的一些文本;      $范围。在（update_parent_controller$，功能（事件，消息）{
        $ scope.message =消息;
      }）;
    }
  ]）
 

HTML

 ＆LT; D​​IV NG-应用=对myAppNG控制器=ParentCtrl＆GT;    ＆LT; D​​IV NG-应用=myNewAppNG控制器=ChildCtrl＆GT;
      ＆所述p为H.; {{消息}}＆下; / P＆GT;
    ＆LT; / DIV＆GT;    ＆LT;按钮NG点击=clickFunction（）＆gt;点击＆LT; /按钮＆GT;
  ＆LT; / DIV＆GT;
 

解决方案

由于@JB Nizet说，你这样做完全一样的方式。您可以使用服务两个控制器之间的通信。

一个模块需要有其它模块的依赖关系。这始终是一个单向依赖性。我做了 secondModule firstModule 的依赖。

同样，值在服务存储在名为对象数据。这是因为JavaScript不按引用传递值 - 但按引用传递对象。所以这是拳击的形式。

\r

\r

angular.module（'firstModule'，['secondModule']）\r
  .controller（'FirstController'，FirstController）\r
  。服务（'sharedData'，SharedData）;\r
\r
。FirstController $注射= ['sharedData'];\r
功能FirstController（sharedData）{\r
  \r
  this.data = sharedData.data;\r
}\r
\r
功能SharedData（）{\r
\r
  this.data = {\r
    值：默认值\r
  }\r
\r
}\r
\r
angular.module（'secondModule'，[]）\r
  .controller（'SecondController'，SecondController）;\r
\r
。SecondController $注射= ['sharedData'];\r
功能SecondController（sharedData）{\r
  \r
  this.data = sharedData.data;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=firstModule＆GT;\r
\r
  ＆LT; D​​IV NG控制器=FirstController为VM＆GT;\r
    第一个控制器模块firstModule＆LT; BR＆GT;\r
    ＆LT;输入类型=文本NG模型=vm.data.value/＆GT;\r
  ＆LT; / DIV＆GT;\r
\r
  ＆LT; D​​IV NG控制器=SecondController为VM＆GT;\r
    第二个控制器模块secondModule＆LT; BR＆GT;\r
    {{vm.data.value}}\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

I want to know that can we communicate between two different controllers in AngularJS. Suppose I have Two modules,
Plunker: http://plnkr.co/edit/if0MQwlx9WHrD8XnMi2t?p=preview

    1. var app = angular.module('fistModule', []);
           app.controller('first', function ($scope) {
                $scope.firstMethod= function () {
                 //my code}
} )
    2. var newapp = angular.module('secondModule,[]');
           newapp.controller('second', function ($scope) {
              $scope.secondMethod= function () {
               //my code}

Is there way to communicate between controllers of two different modules.

My Code: JS:

angular.module('myApp', [])
  .controller('ParentCtrl', ['$scope',
    function($scope) {

      $scope.message = "Child updated from parent controller";

      $scope.clickFunction = function() {
        $scope.$broadcast('update_parent_controller', $scope.message);
      };
    }
  ]);
  angular.module('myNewApp', [])
  .controller('ChildCtrl', ['$scope',
    function($scope) {
      $scope.message = "Some text in child controller";

      $scope.$on("update_parent_controller", function(event, message) {
        $scope.message = message;
      });
    }
  ])

HTML:

<div ng-app="myApp" ng-controller="ParentCtrl">

    <div ng-app="myNewApp" ng-controller="ChildCtrl">
      <p>{{message}}</p>
    </div>

    <button ng-click="clickFunction()">Click</button>
  </div>

解决方案

As @JB Nizet says, you do it the exact same way. You use a service to communicate between two controllers.

One module needs to have the other module as a dependency. This is always a one-way dependency. I have made secondModule a dependency of firstModule.

As well, the value in the service is stored in an object called data. This is because JavaScript does not pass values by reference -- but does pass objects by reference. So this is a form of boxing.

angular.module('firstModule', ['secondModule'])
  .controller('FirstController', FirstController)
  .service('sharedData', SharedData);

FirstController.$inject = ['sharedData'];
function FirstController(sharedData) {
  
  this.data = sharedData.data;
}

function SharedData() {

  this.data = {
    value: 'default value'
  }

}

angular.module('secondModule', [])
  .controller('SecondController', SecondController);

SecondController.$inject = ['sharedData'];
function SecondController(sharedData) {
  
  this.data = sharedData.data;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="firstModule">

  <div ng-controller="FirstController as vm">
    First Controller in module firstModule<br>
    <input type=text ng-model="vm.data.value" />
  </div>

  <div ng-controller="SecondController as vm">
    Second Controller in module secondModule<br>
    {{vm.data.value}}
  </div>
</div>

这篇关于如何在AngularJs的两个不同的模块控制器之间进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！