AngularJs에서 두 개의 다른 모듈의 컨트롤러간에 통신하는 방법

Question

AngularJS에서 두 개의 다른 컨트롤러간에 통신 할 수 있는지 알고 싶습니다. 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} 

두 개의 서로 다른 모듈의 컨트롤러간에 통신하는 방법이 있나요 : 나는 두 모듈,
Plunker 있다고 가정합시다.

내 코드 : 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의 형식입니다.

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>

Answer 2

당신의 plunker은 매우 사소한 문제를 가지고있다.

변경이

 angular.module('myApp', []) 

가 동일한 모듈에있어 또는 아무것도 변경되지 않습니다하지 여부

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