Question

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

在登录成功后，我设置了一个简单的广播，这是在它自己的登录控制器中：

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

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

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

学习如何使用它将非常有用，因为当其他视图中的数据发生变化时，我会继续在主视图上更新。如果它有所作为我正在使用UI-Router。

Answer 1

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

以下是关于如何在控制器之间共享值的简洁解决方案:(在此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"
    });

在控制器中绑定

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>

最终观点

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

我不介意你投票，选择这个作为答案或最终使用它。我只想让你记住关于在控制器之间共享值的这个常见问题的最佳实践。

希望它有所帮助。

Answer 2

您正在"female"广播$rootScope

AngularJS $ Broadcast和$ on不更新$ scope

2 个答案: