angularjs $ broadcast不反映视图上的值

时间:2015-04-09 05:14:40

标签: angularjs angular-broadcast

当我在$ rootScope中添加$ broadcast并将其捕获到其他控制器时,它没有反映任何要查看的值。 示例:



// on first ctrl.
controller('firstCtrl', ['$scope','$location', '$rootScope', function($scope, $location, $rootScope) {
    $scope.myFunc = function() { 
        $rootScope.$broadcast('someEvent');
        $location.path('/users');
    }
}])


// On Users Page.
.controller('usersCtrl', ['$scope','$rootScope', function($scope, $rootScope) { 
    $scope.dataFilter = {};
    $rootScope.$on('someEvent', function(event, b) {
        $scope.callOnBroadcast();
    });
  
    // call this function on broadcast.  
    $scope.callOnBroadcast = function() {
      $scope.dataFilter = {
        types: [
          {key: 'tags',     val: 'Collections'},
          {key: 'prices',   val: 'Price'},
          {key: 'ratings',  val: 'Rating'},
          {key: 'designers',val: 'Designer'}
        ],
        data: {tags: [], prices: [], ratings: [], designers: []}

      };

      $scope.$apply();


    };
}])

<h4 data-ng-repeat="ftr in dataFilter.types">  
  {{ftr.val}}
</h4>
&#13;
&#13;
&#13;

当我在MyFunc上使用firstCtrl功能时,它会将我重定向到用户的页面,同时还会播放广播功能。 在用户页面上,我在广播开启时使用$scope.callOnBroadcast(),但即使我使用$scope.$apply(),它也反映了视图页面上的任何更改。 我哪里错了?

3 个答案:

答案 0 :(得分:2)

您的控制器都没有任何层次结构,这就是您需要在$rootScope而不是范围内广播事件的原因,

  

您的问题是您在注册听众之前正在播放活动   事件。之后你正在进行$location.path('/users')加载   带有usersCtrl的用户模板。

我认为您应该首先进行重定向,然后使用某些$rootScopetimeout中广播该事件,以便提供usersCtrl

<强>代码

// on first ctrl.
controller('firstCtrl', ['$scope','$location', '$rootScope',  '$timeout',function($scope, $location, $rootScope, $timeout) {
    $scope.myFunc = function() { 
        $location.path('/users');
        $timeout(function(){
          //boardcast will available to every listener
          $rootScope.$broadcast('someEvent'); 
        },1000);
    }
}]);
  

确保之前应该注册其他侦听器代码   广播事件。(听众应在之前注册   广播)。

$scope.$on('someEvent', function(event, b) {
    $scope.callOnBroadcast();
});
  

为了使它更好的解决方案,你可以使用解决方案   $routeProvider

答案 1 :(得分:0)

看看这个&#34;范围如何。$ broadcast()与AngularJS中的隔离范围进行交互&#34; http://www.bennadel.com/blog/2725-how-scope-broadcast-interacts-with-isolate-scopes-in-angularjs.htm

对你有帮助。

答案 2 :(得分:0)

您可以将$ rootScope注入控制器并在该级别进行广播。 您可以在此处看到$ broadcast生效: http://plnkr.co/edit/ySrEU4accdgeY7iJhdZi?p=preview

app.controller('firstCtrl', ['$scope', '$rootScope','$location', function($scope, $rootScope, $location) {
$scope.myFunc = function() { 
    $rootScope.$broadcast('someEvent');
    $location.path('/users');
};

}])


// On Users Page.
.controller('usersCtrl', ['$scope', '$rootScope', function($scope, $rootScope) { 
$scope.dataFilter;
$rootScope.$on('someEvent', function(event, b) {
    $scope.callOnBroadcast();
    //$scope.dataFilter = 'test';
});

// call this function on broadcast.  
$scope.callOnBroadcast = function() {
  $scope.dataFilter = {
    types: [
      {key: 'tags',     val: 'Collections'},
      {key: 'prices',   val: 'Price'},
      {key: 'ratings',  val: 'Rating'},
      {key: 'designers',val: 'Designer'}
    ],
    data: {tags: [], prices: [], ratings: [], designers: []}

  };

  //$scope.$apply();  <- I don't think is necessary


};

}])