感谢你这么多阅读我的问题:)
目标:我想,如果他们打开一个新标签或刷新坚持一个登录的用户的姓名和照片。当最初认证(调用 attempt.login
的形式提交),视图更新精(像这样:)
userController.js.coffee:
$ scope.attemptLogin = - > $ scope.showLoginForm = FALSE $ http.post(apiURL +/登陆 电子邮件:$ scope.credentials.email 密码:$ scope.credentials.password ).success(数据) - > 如果data.error 的console.log错误:+ data.error 其他 $ scope.user =数据 localStorageService.add(用户,数据)
在问题是,当我做一个页面加载和尝试,并设置 $ scope.user
从本地存储变量,(像这样:)我看到的console.log $ scope.user
就好了,但观点并不反映任何用户数据。
userController.js.coffee:
$超时 - > 如果localStorageService.get(用户)==未定义 $ scope.user = {} $ scope.loggedIn = FALSE 的console.log无用户 其他 $ scope.user = localStorageService.get(用户) 的console.log $ scope.user $范围。$摘要(),1
正如你可以看到我试图把它放在一个 $超时
块强制改变发生在接下来的消化,甚至明确名为 $范围。$摘要()
。我不知道我要去哪里错在这里,我周围的其他SO的显然凑无济于事。对此事的任何洞察力大大AP preciated!
index.html的:
< DIV CLASS =登录 - 注册NG-NG斗篷控制器=UserController的> < DIV CLASS =用户信息ID =user_detailsNG点击=toggleUserMenu()NG-秀=的loggedIn> < DIV> < IMG类=用户化身小NG模型=user.photo_urlNG-SRC ={{user.photo_url}}> < DIV CLASS =用户名NG-模式=user.name> {{用户名}} < / DIV> < / DIV> < / DIV> < DIV CLASS =用户菜单NG秀=的loggedIn&放大器;&安培; showUserMenu> < A HREF NG点击=退出()>注销< / A> < / DIV> < A HREF NG点击=toggleLoginForm()NG-秀=的loggedIn&安培;!&安培;!showLoginFormNG-斗篷>登录上述< / A> <窗体类=表单内联NAME =登录表单NG-秀=showLoginFormNG提交=attemptLogin()NG-斗篷> <跨度类=glyphicon glyphicon-删除圈登录表单字形NG点击=toggleLoginForm()>< / SPAN> <标签类=SR-只有为=电子邮件>电子邮件地址< /标签> <输入类型=文本名称=电子邮件ID =电子邮件NG模型=credentials.email占位符=电子邮件级=表格控/> < BR /> <标签类=SR-只有为=密码>密码和LT; /标签> <输入类型=密码NAME =密码ID =密码NG模型=credentials.password占位符=密码级=表格控/> < BR /> <输入类=表格控TYPE =提交> < /表及GT;< / DIV>
解决方案
大概在 $ 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 resource
User; 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
上一篇:如何点击在量角器测试在选择框中的选项?量角器、框中、选项、测试
下一篇:噶0.12.9,单元测试,因果报应-NG-html2js- preprocessor因果报应、单元测试、preprocessor、html2js