AngularJS视图中不反映$ scope.model，尽管被设置数据 [英] AngularJS view not reflecting $scope.model, though data is being set

问题描述

感谢你这么多阅读我的问题：）

目标：我想，如果他们打开一个新标签或刷新坚持一个登录的用户的姓名和照片。当最初认证（调用 attempt.login 的形式提交），视图更新精（像这样：）

userController.js.coffee：

  $ scope.attemptLogin =  - ＆GT;
  $ scope.showLoginForm = FALSE
  $ http.post（apiURL +/登陆
    电子邮件：$ scope.credentials.email
    密码：$ scope.credentials.password
  ）.success（数据） - ＆GT;
    如果data.error
      的console.log错误：+ data.error
    其他
      $ scope.user =数据
      localStorageService.add（用户，数据）
 

在问题是，当我做一个页面加载和尝试，并设置 $ scope.user 从本地存储变量，（像这样:)我看到的console.log $ scope.user 就好了，但观点并不反映任何用户数据。

userController.js.coffee：

  $超时 - ＆GT;
  如果localStorageService.get（用户）==未定义
    $ scope.user = {}
    $ scope.loggedIn = FALSE
    的console.log无用户
  其他
    $ scope.user = localStorageService.get（用户）
    的console.log $ scope.user
    $范围。$摘要（）
，1
 

正如你可以看到我试图把它放在一个 $超时块强制改变发生在接下来的消化，甚至明确名为 $范围。$摘要（）。我不知道我要去哪里错在这里，我周围的其他SO的显然凑无济于事。对此事的任何洞察力大大AP preciated！

index.html的：

 ＆LT; D​​IV CLASS =登录 - 注册NG-NG斗篷控制器=UserController的＆GT;
  ＆LT; D​​IV CLASS =用户信息ID =user_detailsNG点击=toggleUserMenu（）NG-秀=的loggedIn＆GT;
    ＆LT; D​​IV＆GT;
      ＆LT; IMG类=用户化身小NG模型=user.photo_urlNG-SRC ={{user.photo_url}}＆GT;
      ＆LT; D​​IV CLASS =用户名NG-模式=user.name＆GT;
        {{用户名}}
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =用户菜单NG秀=的loggedIn＆放大器;＆安培; showUserMenu＆GT;
    ＆LT; A HREF NG点击=退出（）＆GT;注销＆LT; / A＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; A HREF NG点击=toggleLoginForm（）NG-秀=的loggedIn＆安培;！＆安培;！showLoginFormNG-斗篷＆GT;登录上述＆lt; / A＆GT;
  ＆LT;窗​​体类=表单内联NAME =登录表单NG-秀=showLoginFormNG提交=attemptLogin（）NG-斗篷＆GT;
    ＆LT;跨度类=glyphicon glyphicon-删除圈登录表单字形NG点击=toggleLoginForm（）＆GT;＆LT; / SPAN＆GT;
    ＆LT;标签类=SR-只有为=电子邮件＆GT;电子邮件地址＆LT; /标签＆gt;
    ＆LT;输入类型=文本名称=电子邮件ID =电子邮件NG模型=credentials.email占位符=电子邮件级=表格控/＆GT;
    ＆LT; BR /＆GT;
    ＆LT;标签类=SR-只有为=密码＆GT;密码和LT; /标签＆gt;
    ＆LT;输入类型=密码NAME =密码ID =密码NG模型=credentials.password占位符=密码级=表格控/＆GT;
    ＆LT; BR /＆GT;
    ＆LT;输入类=表格控TYPE =提交＆GT;
  ＆LT; /表及GT;
＆LT; / DIV＆GT;
 

解决方案

大概在 $ scope.user 的变化不是由的角度看。尽量包住其他分公司是这样的：

  $范围。$应用（函数（）{
    $ scope.user =数据
    localStorageService.add（用户，数据）
}）
 

这将迫使手表和消化周期进行更新。我不知道你的手册消化电话，但你应该避免调用的。

此外，而不是使用水平低 HTTP ，你可以RA present用户为资源用户;这样，角度会返回一个承诺，并采取自动更新接收到数据时，您的看法照顾。

参见：资源文档

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屋！