Question

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

这些divs正在使用session服务，$ {广播到$rootScope，但正如您所看到的那样$rootScope未在应用之间共享。

因此$rootScope.$broadcast未抓住appB中的appA。

这是一个演示：

＆＃13;

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']);

＆＃13;

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

＆＃13;

我怎样才能将appB广播到appA？

Answer 1

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

Answer 2

我认为在您的情况下，您可能需要使用角度框架之外的事件，因为单独的角度模块不会共享它们的rootScope。

您可以使用window或document元素创建event listeners and custom events，或使用jQuery的trigger和on。

Answer 3

我建议您使用//imports omitted public class MyRow implements Comparable<MyRow>{ private String column1; private int column2; @Override public int compareTo(MyRow o) { return this.column1.compareTo(o.column2); } }和Collections.sort(yourList<MyRow>);进行两个窗口之间或同一窗口之间的通信。

<强>代码

            onResize: function(){
                setTimeout(function(){
                    var msnry = Masonry.data( '#imagesarea' );
                    msnry.layout();
                },200);
            }

Working Plunkr

Answer 4

经过一些试验和错误，并根据我在这里得到的回复，这对我有用：

(function() {
  var m = angular.module('session', []);
  var serviceInstance = null;
  var rootScopeArray = [];

  m.provider('$session', function() {
    this.$get = ['$q', '$http', '$timeout',  '$window', '$rootScope',
      function($q, $http, $timeout, $window, $rootScope) {
        rootScopeArray.push($rootScope);

        if (serviceInstance) {
          return serviceInstance;
        }

        $timeout(function(){
          for (var i = 0; i < rootScopeArray.length; i++) {
            rootScopeArray[i].$broadcast("YO");
          }
        }, 2000);
        
        return serviceInstance;
      }
    ];
  });

  return m;
})();

angular.module('ngApp', ['session'])
  .controller('ngAppController', function($scope, $session) {
    $scope.msg = "Waiting for message..";
    $scope.$on('YO', function() {
      $scope.msg = 'Message recd';
    });

    //$rootScope.$broadcast('YO');
  });


var bElement = document.querySelector('#appB');
angular.module('appB', ['session'])
  .run(function($rootScope, $session) {
    $rootScope.msg = "Hello from app 'b'";
    $rootScope.$on('YO', function() {
      $rootScope.msg = 'Message recd';
    });
  });
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>

该解决方案似乎适用于我的应用程序，我不必更改任何代码。只需更新session服务即可。

如果有更好的方法，请提出建议。

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

4 个答案: