javascript - AngularJS $Broadcast 和 $on 不更新 $scope

Question

我正在尝试用用户名更新主导航栏，并用他购买的商品数量更新购物车图标。我之前没有尝试过使用 $broadcast 和 $on。

在成功发布登录后，我设置了一个简单的广播，这是在它自己的登录 Controller 中:

$rootScope.$broadcast('user-logged-in');

现在我在购物车图标所在的 Controller 中有 $on 事件，但该值在登录时永远不会更新。事实上，我什至没有收到控制台消息，所以它永远不会到达它.

$scope.$on('user-logged-in', function  (event, args) {
            console.log("Broadcasted to Products Controller");
            $scope.logged= Session.isLogged();
            $scope.username= Session.recallName();
        });

学习如何使用它会很有帮助，因为当其他 View 中的数据发生变化时，我会在主视图上更新很多内容。如果它有所作为，我正在使用 UI-Router。

Answer 1

请记住，$broadcast、$rootScope、$apply...(以及其他一些)的使用在 angularJS 中是非常糟糕的做法

这是一个关于如何在 Controller 之间共享值的干净解决方案:(在这个 plunker 中工作)

路由

$urlRouterProvider.when("","/mainpage");

  $stateProvider
    .state('app', {
      abstract: true,
      templateUrl: "main.template.html",
      controller: "MainCtrl"
    }).state('app.mainpage', {
      url: "/mainpage",
      templateUrl: "mainView.html",
      controller:"PageCtrl"
    });

在 Controller 中绑定(bind)

angular.module('MyApp').controller('MainCtrl', function($scope, UserService){

    $scope.user = UserService.user;

});
angular.module('MyApp').controller('PageCtrl', function($scope, UserService){

    $scope.user = UserService.user;

});

服务

angular.module('MyApp').service('UserService', function(){

    var service = {};

    service.user = {};

    service.user.name = "Not connected";

    return service;

});

带标题的模板

<p>I'm the header welcome {{user.name}}</p>
<hr/>
<ui-view></ui-view>

最终 View

<p>I'm the view : User : {{user.name}}</p>
<input type="text" ng-model="user.name">
<button ng-click="user.name='Derp'">Change name to Derp</button>

我不介意你投票，选择这个作为答案或者最终使用它。我只想让您牢记有关在 Controller 之间共享值这一常见问题的最佳实践。

希望对您有所帮助。