Angular $范围.$广播活动仅执行一次

我在两个单独的控制器中有两个代码（在两个单独的JS文件中）；一个触发角度的$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>"
    });
});

第一个控制器由index.html文件中的ng-controller指令引用；另一个文件，第22页。

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以及$ bartercast/$ emit/$ on之类的东西。任何帮助都将受到赞赏。我看到了许多有关相关问题的文章；没有看到任何明显相关的东西；尽管我确实注意到了这篇文章：

Angular $广播仅在页面刷新后更新

通过分离范围

的基于AngularJS事件的通信

我认为与孤立范围有关的最有前途的参考文献，但我还没有任何工作。

$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
  });
}

相关内容

最新更新

热门标签：