AngularJS，模型和视图在回调后不同步，并且 $apply 给出错误答案

【问题标题】：AngularJS, Model and view not in synch after callback, and $apply gives errorAngularJS，模型和视图在回调后不同步，并且 $apply 给出错误
【发布时间】：2014-06-19 09:26:47
【问题描述】：

我试图让两个控制器通过 Angularjs 中的服务进行通信。服务“playerFocus”在模型级别工作正常，但视图没有更新。我特别提到了 ModalDialogController 中的变量 show，它正确地变为 true，但在视图中仍然为 false。这是完整的js：

(function(){

var players = [
    {
        id: 1,
        name: 'Charles Foley',
        photo: 'images/gem-01.gif'
    },
    {
        id: 2,
        name: 'Pippo',
        photo: 'images/gem-02.gif'
    },
    {
        id: 3,
        name: 'Roberto',
        photo: 'images/gem-03.gif'
    }
];

var app = angular.module('soccer-match', []);

app.service('playerFocus', function(){
    var subscriber = undefined;

    this.sendMessage = function(mex){
        subscriber(mex);
    };

    this.onMessage = function(callback){
        subscriber = callback;
    };
});

app.controller('PlayersListController', ['$scope', 'playerFocus', function($scope, playerFocus){
    $scope.players = players;

    $scope.playerDialog = function(p){
        playerFocus.sendMessage(p);         
    };
}]);

app.controller('ModalDialogController', ['$scope', 'playerFocus', function($scope, playerFocus){

    $scope.player = undefined;
    $scope.show = false;

    $scope.focusPlayer = function(p) {
        for(i in players){
            if(players[i].id == p){ // PROBLEM HERE
                $scope.$apply( function(){
                    $scope.player = players[i];
                    $scope.show = true;
                });
            }
        }
    };


    playerFocus.onMessage($scope.focusPlayer); // PROBLEM HERE
}]);

还有html模板：

            <!-- players list -->
        <div id="players-list" ng-controller="PlayersListController">
            <div ng-repeat="player in players">

                <!-- player -->
                <div class="player">    
                    <img class="player-thumb" ng-src="{{player.photo}}"}}>
                    <div class="player-info">
                        <p>{{player.name}}</p>
                        <button ng-click="playerDialog(player.id)" type="button" class="btn btn-default player-info-btn">Info</button>
                    </div>
                </div>

            </div>

            <!-- add player -->
            <div class="player">    
                <img class="player-thumb" src="images/default.png"}}>
                <div class="player-info">
                    <p>- ??? -</p>
                    <button type="button" class="btn btn-success player-info-btn">Nuovo Giocatore</button>
                </div>
            </div>

        </div>

    </div>

    <!-- player modal dialog -->
    <div ng-controller="ModalDialogController">
        <div class="modal-dialog" ng-show="{{show}}">
            {{player}}{{show}}
        </div>
    </div>

我整天都在寻找解决方案，one 在服务回调后使用 $apply 强制同步模型和视图，但我得到了这个error。我对此感到非常困惑，而且 Angular 文档对于我的理解水平来说太复杂了。

【问题讨论】：

我建议您发布您的 HTML。如果您的视图没有更新，则可能是您遇到了绑定问题。
HTML 添加，谢谢。我认为这不是绑定问题，因为在控制台中我可以看到 ng-show=true，视图只是没有更新... xD
它是一个绑定问题。您的视图绑定到多个控制器上的不同范围变量：{{ player }} 和 {{ show }}。由于它们是不同的作用域变量，它们之间没有绑定，所以你不应该期望它们同步更新它们的视图。
很抱歉打扰您@pixelbits，但我无法跟上。如果存在绑定问题，为什么在控制台 > 元素中我可以看到正确的数据？
{"id":3,"name":"Roberto","photo":"images/gem-03.gif "}真
模型与视图的绑定被破坏了。您的 ModalDialogController 和您的 PlayersListController 在姊妹范围内。如果您在一个控制器的范围内设置范围变量，它不会更新另一个，反之亦然，因为它们是单独的范围。作用域可以继承彼此的作用域变量，在这种情况下，它们可能会绑定到同一个作用域变量——但在这种情况下，它们是姐妹作用域。

标签： javascript angularjs controller apply

【解决方案1】：

我认为你可以将它重构为使用服务作为双向数据绑定（没有 $apply），它在你的代码中看起来很复杂

http://plnkr.co/edit/pt2xwlYqvY3r840tHJ92?p=info

【讨论】：