AngularJS 视图不反映 $scope.model，虽然正在设置数据 [英] AngularJS view not reflecting $scope.model, though data is being set

问题描述

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

目标:我想在登录用户打开新标签页或刷新时保留他们的姓名和照片.最初进行身份验证时(在表单提交上调用 attempt.login)，视图更新得很好(像这样:)

userController.js.coffee:

$scope.attemptLogin = ->$scope.showLoginForm = false$http.post(apiURL + "/login"电子邮件:$scope.credentials.email密码:$scope.credentials.password).成功(数据)->如果数据错误console.log "错误:" + data.error别的$scope.user = 数据localStorageService.add("用户", 数据)

问题 是，当我加载页面并尝试从本地存储变量设置 $scope.user 时，(像这样:) 我看到 $scope.usercode>console.log $scope.user 就好了，但该视图不反映任何用户数据.

userController.js.coffee:

$timeout ->如果 localStorageService.get("user") == 未定义$scope.user = {}$scope.loggedIn = falseconsole.log没有用户"别的$scope.user = localStorageService.get("user")console.log $scope.user$scope.$digest(), 1

如您所见，我已尝试将其放在 $timeout 块中以强制更改发生在下一个摘要上，甚至明确调用了 $scope.$digest().我不知道我哪里出错了，我已经在其他 SO 周围四处寻找，但显然无济于事.不胜感激！

index.html:

<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">{{用户名}}

<div class="user-menu" ng-show="loggedIn && showUserMenu"><a href ng-click="logOut()">注销

<a href ng-click="toggleLoginForm()" ng-show="!loggedIn && !showLoginForm" ng-cloak>登录</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">电子邮件地址</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"></表单>

解决方案

可能是视图没有看到 $scope.user 中的更改.尝试像这样包装 else 分支:

$scope.$apply(function(){$scope.user = 数据localStorageService.add("用户", 数据)})

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

此外，您可以将您的用户描述为 resourceUser，而不是使用低级别的 http；这样，Angular 将返回一个 promise 并负责在收到数据时自动为您更新视图.

另见:资源文档

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>

解决方案

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

这篇关于AngularJS 视图不反映 $scope.model，虽然正在设置数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！