AngularJS 视图不反映 $scope.model，尽管正在设置数据

Question

非常感谢您阅读我的问题:)

目标：如果登录用户打开新标签或刷新，我想保留登录用户的姓名和照片。最初进行身份验证时（在表单提交上调用attempt.login），视图更新正常（如下所示：）

userController.js.coffee：

$scope.attemptLogin = ->
  $scope.showLoginForm = false
  $http.post(apiURL + "/login"
    email: $scope.credentials.email
    password: $scope.credentials.password
  ).success (data) ->
    if data.error
      console.log "error: " + data.error
    else
      $scope.user = data
      localStorageService.add("user", data)

问题是，当我进行页面加载并尝试从本地存储变量设置$scope.user 时，（就像这样：）我看到console.log $scope.user 很好，但是视图不反映任何用户数据。

userController.js.coffee：

$timeout ->
  if localStorageService.get("user") == undefined
    $scope.user = {}
    $scope.loggedIn = false
    console.log "no user"
  else
    $scope.user = localStorageService.get("user")
    console.log $scope.user
    $scope.$digest()
, 1

如您所见，我尝试将其放入 $timeout 块中以强制更改在下一个摘要中发生，甚至明确调用 $scope.$digest()。我不知道我在这里哪里出错了，我已经在其他 SO 周围搜寻，显然无济于事。非常感谢您对此事的任何澄清！

index.html:

<div class="login-signup" ng-cloak ng-controller="userController">
  <div class="user-details" id="user_details" ng-click="toggleUserMenu()" ng-show="loggedIn">
    <div>
      <img class="user-avatar-small" ng-model="user.photo_url" ng-src="{{user.photo_url}}">
      <div class="user-name" ng-model="user.name">
        {{user.name}}
      </div>
    </div>
  </div>
  <div class="user-menu" ng-show="loggedIn && showUserMenu">
    <a href ng-click="logOut()"> Log Out</a>
  </div>
  <a href ng-click="toggleLoginForm()" ng-show="!loggedIn && !showLoginForm" ng-cloak>Log In</a>
  <form class="form-inline" name="loginForm" ng-show="showLoginForm" ng-submit="attemptLogin()"ng-cloak>
    <span class="glyphicon glyphicon-remove-circle login-form-glyph" ng-click="toggleLoginForm()"></span>
    <label class="sr-only" for="email">email address</label>
    <input type="text" name="email" id="email" ng-model="credentials.email" placeholder="email" class="form-control"/>
    <br/>
    <label class="sr-only" for="password">password</label>
    <input type ="password" name="password" id="password" ng-model="credentials.password" placeholder="password" class="form-control"/>
    <br/>
    <input class="form-control" type="submit">
  </form>
</div>

Answer 1

视图可能看不到$scope.user 的变化。尝试像这样包装else 分支：

$scope.$apply(function(){
    $scope.user = data
    localStorageService.add("user", data)
})

这将强制更新手表和摘要周期。我不确定你的手动digest 调用，但你应该避免调用它。

此外，您可以将您的用户表示为resourceUser，而不是使用低级别的http；这样，Angular 将返回一个承诺，并在收到数据时自动为您更新视图。

See also: resource docs

Answer 2

在任何使用 angularjs 和更新视图的奇怪情况下 - 总是尝试：

$scope.$apply(function(){
   $scope.your_model = your_value;
});