AngularJS view not reflecting $scope.model, though data is being set

问题

Thank you so much for reading my question :)

Aim: I want to persist a logged-in user's name and photo if they open a new tab or refresh. When originally authenticating (calling attempt.login on the form submit), the view updates fine (like so:)

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)

The problem is that when I do a page load and try and set $scope.user from the local storage variable, (like so:) I see the console.log $scope.user just fine, but the view doesn't reflect any user data.

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

As you can see I've tried to put it in a $timeout block to force the change to take place on the next digest, and even explicitly called $scope.$digest(). I don't know where I'm going wrong here, I've scrounged around the other SO's to no avail apparently. Any lucidity on the matter is greatly appreciated!

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>

回答1:

Probably the change in $scope.user is not seen by the view. Try to wrap the else branch like this:

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

This will force an update of the watches and a digest cycle. I'm not sure about your manual digest call, but you should probably avoid calling that.

Moreover, instead of using the low level http, you could rapresent your user as a resourceUser; in this way, Angular will return a promise and take care of automatically updating the view for you when the data is received.

See also: resource docs

回答2:

In any strange situation with angularjs and updating view - always try:

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

来源：https://stackoverflow.com/questions/23488114/angularjs-view-not-reflecting-scope-model-though-data-is-being-set