如何將消息從主模塊發送到通知模塊

Question

下面的代碼僅僅是一個示例，因爲我遇到的實際代碼不是我可以共享的東西，我是新來的角，所以解決方案並不是非常明顯，就像這樣，我可以在幾秒鐘內使用jQuery。

在我的應用程序中，我有一個運行ajax的主模塊，當ajax返回成功或失敗時需要向通知模塊發送消息。在示例代碼中，您可以將所有模塊更改爲使用一個模塊並且工作正常，第二次嘗試使它作爲兩個模塊工作，但不再工作，但不會引發JS錯誤。

對待ID的

theProcess

和

theMessage

作爲兩個單獨的模塊，假裝theProcess是AJ ax調用服務器並返回字符串響應，然後將該字符串響應發送到theMessage模塊。

查看下面的代碼。

HTML：

<div id="theProcess" ng-controller="ControllerZero"> 
    <input ng-model="message"> 
    <button ng-click="handleClick(message);">LOG</button> 
</div> 
<div id="theMessage"> 
    <div ng-controller="ControllerOne"> 
      <input ng-model="message" > 
    </div> 
    <div ng-controller="ControllerTwo"> 
      <input ng-model="message" > 
    </div> 
</div> 

JS：

var masterModule = angular.module('masterModule', []); 

masterModule.controller('ControllerZero', ['$scope', function($scope) { 
    $scope.handleClick = function(msg) { 
    $scope.$emit('handleEmit', { 
     message: msg 
    }); 
    }; 
}]); 

var notificationModule = angular.module('notificationModule', ['masterModule']); 

notificationModule.run(function($rootScope) { 
    $rootScope.$on('handleEmit', function(event, args) { 
    $rootScope.$broadcast('handleBroadcast', args); 
    }); 
}); 

notificationModule.controller('ControllerOne', ['$scope', function($scope) { 
    $scope.$on('handleBroadcast', function(event, args) { 
    $scope.message = 'ONE: ' + args.message; 
    }); 
}]); 

notificationModule.controller('ControllerTwo', ['$scope', function($scope) { 
    $scope.$on('handleBroadcast', function(event, args) { 
    $scope.message = 'TWO: ' + args.message; 
    }); 
}]); 

angular.bootstrap(document.getElementById('theProcess'), ['masterModule']); 
angular.bootstrap(document.getElementById('theMessage'), ['notificationModule']); 

2 Module FIDDLE

working example using one module

Answer 1

了Kobi科恩把我在正確的方向，我能夠修復它，我把div的父母div標記包裹起來，然後給這個標籤一個名爲container的標識，然後我改變了我的bootstraps頁面下方爲閱讀：

angular.bootstrap(document.getElementById('container'), ['masterModule', 'notificationModule']); 

See updated fiddle

Answer 2

您分別引導2個模塊，因此您實際上在頁面上有2個不同的應用程序。嘗試引導最下方 模塊（其中沒有一個是依靠），在這種情況下，「notificationModule」

- 了Kobi科恩

https://docs.angularjs.org/guide/di

https://docs.angularjs.org/guide/module