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服务并像这样使用它，它会更好。

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

您的控制器定义无效，请使用此类。

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

AngularJS：当$ scope中的值更改时，View不会更新

1 个答案: