AngularJS: View не обновляется при изменении значения в переменной $ scope

Question

У меня есть html-файл с представлением, которое получает его значения из области AngularJS.

<form ng-controller="EmployeesController as emp" class="signed-in" ng-submit="logOutUser()"> 
    <div class="row"> 
     <div class="col-md-10 text-left"> 
      <h5>Your Games, {{emp.username}}</h5> 
     </div> 
     <div class="col-md-2"> 
      <button class="btn btn-md btn-primary btn-block" type="submit">Log Out</button> 
     </div> 
    </div> 
    <div class="row store"> 
     <div class="col-md-12"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Games To Buy</div> 
       <div class="panel-body"> 
        <table class="table table-striped"> 
        <thead> 
         <tr> 
          <th>Game Name</th> 
          <th>Game Status {{what}}</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr ng-repeat="game in emp.games"> 
          <td>{{game}}</td> 
          <td> 
           <button ng-click="buyGame(game.gameId)" type="button" class="btn btn-sm btn-primary btn-block" href="#">Buy</button> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

.

И файл JS:

var app = angular.module("MyApp", ['ngRoute']); 
app.controller("EmployeesController", function($scope, $http) { 

this.games = [{gameName: 'aaa', gameId: '1'},{gameName: 'aaa', gameId: '1'},{gameName: 'aaa', gameId: '1'}]; 
this.ownedGames = []; 

var that = this; 

$scope.sellGame = function(gameId) { 
    var index = that.ownedGames.indexOf(gameId); 
    that.ownedGames.splice(index, 1); 
    $.jStorage.set(that.username, that.ownedGames); 
} 

$scope.$on('$viewContentLoaded', function() { 
    if($.jStorage.get('Employee') == null) 
     $scope.logged = false; 
    else 
     $scope.logged = true; 

    $http.get('employees.json'). 
    success(function(data, status, headers, config) { 
      that.games = data.games; 
      that.username = $.jStorage.get('Employee'); 
      if($.jStorage.get(that.username) != null) 
       that.ownedGames = $.jStorage.get(that.username); 
    }); 
}); 

});

Хорошо. Таким образом, в основном проблема заключается в том, что переменная emp.games пуста. Прежде всего, он комментируется на отображаемой странице HTML, а во-вторых, когда я отлаживаю страницу, переменная emp.games пуста. Однако переменная, из которой emp.games должна получать свои значения, $ scope.games заполняется значениями, как и должно быть. Поэтому проблема заключается в том, что мой emp.games не видит, что $ scope.games был обновлен в этом HTTP-запросе, поэтому IT не обновляется. Я искал столько, сколько мог, и узнал, что должен использовать $ scope.apply, но везде, где я его использовал, я получил ошибку $ digest уже в процессе ... любые идеи?

Благодаря

Answer 1

Попробуйте проверить diggest

if (!$scope.$$phase) { 
    $scope.$apply(function() { 
      that.games = data.games; 
     }) 
    } 
else 
    that.games = data.games; 

Или вы можете вводить $ службы тайм-аута и использовать его, как это, это будет лучше.

$timeout (function() { 
      that.games = data.games; 
}, 0) 

Неверное определение вашего контроллера, пожалуйста, используйте это.

app.controller("EmployeesController", ['$scope','$http','$timeout', function($scope, $http, $timeout){ 
    //.... 
}]