javascript - 使用angularJS手动引导时如何共享$rootScope？

Question

我正在创建一个有两个应用程序或 Divs 的应用程序。一个是使用 ng-app 指令引导的，而另一个是我使用 angular.bootstrap 方法手动引导的。

问题是这两个 div 都使用了一个 session 服务，该服务 $broadcasts 到 $rootScope，但是正如你所看到的，当你$rootScope 不在应用程序之间共享。

所以 appB 中的 $rootScope.$broadcast 没有被 appA 捕获。

这是一个演示:

angular.module('ngApp', [])
  .controller('ngAppController', function($scope, $rootScope) {
    $scope.msg = "Waiting for message..";
    $scope.$on('YO', function() {
      $scope.msg = 'Message recd';
    });

    //$rootScope.$broadcast('YO');
  });


var bElement = document.querySelector('#appB');
angular.module('appB', [])
  .run(function($rootScope) {
    $rootScope.msg = "Hello from app 'b'";
    $rootScope.$broadcast('YO');
  });
angular.bootstrap(bElement, ['appB']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="ngApp" ng-controller="ngAppController">
  <div>{{msg}}</div>
</div>
<div id="appB">
  <div>{{msg}}</div>
</div>

我怎样才能让 appB 接收到 appA 的广播？

Answer 1

我很确定 Angular 应用程序不应该知道页面上的其他 Angular 应用程序，因此对于这种不寻常的情况，我建议构建一个对两者都可见的“胶水”应用程序，例如window.superAngularScope = {...}。您可以在此对象中创建您需要的任何 api。但是，除非您有充分的理由违反两个 Angular 应用程序之间的封装，否则我建议您寻找不同的解决方案。