Question

我想知道我们可以在AngularJS中的两个不同控制器之间进行通信。假设我有两个模块，
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}

是否可以在两个不同模块的控制器之间进行通信。

我的代码： 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所说，你这样做的方式完全相同。您使用service在两个控制器之间进行通信。

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

同样，服务中的value存储在名为data的对象中。这是因为JavaScript不通过引用传递值 - 而是通过引用传递对象。所以这是boxing的一种形式。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你的掠夺者有一个非常小的问题。

更改此

     angular.module('myApp', [])

到

     angular.module('myApp', ['myNewApp'])

如何在AngularJs中的两个不同模块的控制器之间进行通信

2 个答案: