AngularJS，模型和視圖在回調後不同步，$ apply給出了錯誤

Question

我試圖讓兩個控制器通過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是使用$申請強制模型和視圖的同步後服務回調，但我得到這error。我對此非常困惑，Angular的文檔對我的理解水平太複雜了。

Answer 1

我想你可以重構它使用服務爲雙向數據綁定（無$適用），它看起來都在你的代碼

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