Question

我在两个独立的控制器中有两段代码（在两个单独的JS文件中）;一个触发Angular $scope.$broadcast事件，另一个触发$scope.$on侦听器。

第一个控制器（文件）片段：

var Controller1 = function($scope) {
    $scope.triggerMyEvent = function(){
        $scope.$broadcast('triggeredEvent');
    }
    $scope.go = function ( path ) {
        $location.path( path );
    };
}

第二个控制器（文件）片段：

var Controller2 = function($scope) {
    $scope.$on('triggeredEvent',function(event){
        console.log('found triggered event');
    });
}

应用程序按如下方式连接在一起：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
   $routeProvider
    .when("/page2", {
        controller : Controller2
        template : "/page2.html"
     })
    .otherwise({
        template : "<p>Error</p>"
    });
});

第一个Controller由index.html文件中的ng-controller指令引用;并且上面列出的另一个文件page2.html是从索引上的操作引用和加载的：

的index.html：

<body ng-controller="Controller1">
    <button ng-click="go('/page2.html')">Page 2</button>
</body>

第一次加载此代码时，$scope.$broadcast事件被触发，$scope.$on侦听器捕获它就好了;如果我重新加载它，虽然$scope.$on监听器没有捕获它。要明确的是，在初始加载时，事件被触发并且被捕获得很好;所以当重新启动我的服务器并访问该页面时。但是，如果我刷新页面（F5），我相信该事件正在被解雇，但没有被抓住。我刚开始使用它，所以我假设有一些知识缺乏，但是我已经阅读了$ scope / $ rootScope以及$ broadcast / $ emit / $ on等内容。任何帮助表示赞赏。我看到一些有关相关问题的文章;没有看到任何紧急相关的东西;虽然我确实注意到这篇文章：

Angular $broadcast only updating after page refresh

AngularJS event-based communication through isolate scope

我认为最有希望的参考资料与隔离范围有关，但我还没有能够得到任何工作。

Answer 1

$broadcast和$on在范围层次结构中工作。 $broadcast向范围层次结构中向其后代发送消息。任何$on侦听器必须是广播消息的范围的后代。如果您从$rootScope广播，那么每个范围都将是一个后代，并且每个范围都将能够收听该消息。因此，确保所有范围都可以访问您的消息的一种方法是广播它：

// just to demostrate. don't put this in a controller
$scope.triggerMyEvent = function(){
    $rootScope.$broadcast('triggeredEvent');  //don't do this in a controller
}

理想情况下，您不希望垃圾根范围与消息。（实际上你真的不应该这样做。如果你在控制器中使用$rootScope.$on会更加糟糕，因为它会在每次初始化控制器时添加并保留一个新的监听器。要找到问题的根源（双关语），你需要注意这个层次结构，因为这会影响你的听众。

此层次结构的一个示例：

<div ng-controller="ParentCtrl">
  <div ng-controller="ChildCtrl">
  </div>
</div>

<div ng-controller="SiblingCtrl">
</div>

function ParentCtrl($scope) {
  $scope.$broadcast('parentMsg');
}

function ChildCtrl($scope) {
  $scope.$on('parentMsg', function() {
    // will receive message
  });
}

function SiblingCtrl($scope) {
  $scope.$on('parentMsg', function() {
    // will not receive message
  });
}

Angular $ scope。$ broadcast仅执行一次

1 个答案: