angularjs - AngularJs中两个不同模块的 Controller 之间如何通信

Question

我想知道我们可以在 AngularJS 中的两个不同 Controller 之间进行通信吗？假设我有两个模块，
笨蛋: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}

有没有办法在两个不同模块的 Controller 之间进行通信。

我的代码: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>

Answer 1

正如 @JB Nizet 所说，你可以用完全相同的方式来做。您使用服务在两个 Controller 之间进行通信。

一个模块需要另一个模块作为依赖项。这始终是一种单向依赖。我已将 secondModule 设为 firstModule 的依赖项。

此外，服务中的值存储在名为data的对象中。这是因为 JavaScript 不通过引用传递值，而是通过引用传递对象。所以这是一种拳击形式。

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>