我的应用程序上有一个标题,其中包含“登录”/“创建帐户”选项.当用户登录时,我需要上述内容来交换“注销”选项.
但是,当用户按预期登录ui-view更改但不更改标头时,可以理解,因为它不是ui-view的一部分.到目前为止,这是我的代码:
<ul id="nav-account"> <li>{{mainCtrl.isAuthenticated ? 'Welcome ' + user.firstname + '!'</li> <li ng-if="!isAuthenticated"><a ng-href="{{'HEADER_NAVTABS_SIGNIN'| externallinks}}">Sign In</a> or <a ng-href="{{'HEADER_NAVTABS_CREATE_ACCOUNT'| externallinks}}">Create Account</a></li> <li ng-if="isAuthenticated"><a ui-sref="logout">Sign Out</a><li> </ul>
在我的控制器中,我通过调用服务来设置isAuthenticated的值:
$scope.isAuthenticated = memberService.isAuthenticated();
标题值改变的唯一方法是刷新整个页面 – 这是为什么? ng-if不应该重新评估变量并相应地更新视图吗?
这是否意味着ng-if仅限于一种方式?那么我该怎么做才能使这项工作成功呢?
谢谢
安德鲁
解决方法
仅在关联模板的加载时间上调用控制器的代码.这意味着该变量以后不会再次受到影响.
但是,数据绑定在任何地方都有效,包括ngIf.要使用它并根据之前的解释,我建议你使用两个简单而干净的解决方案:
1.将功能(或服务)绑定在控制器的范围内:
角度:
$scope.isAuthenticated = memberService.isAuthenticated;
部分:
<li>{{isAuthenticated() ? 'Welcome ' + user.firstname + '!'}}</li>
注意使用括号:这将使每个摘要循环中的angular evaluate isAuthenticated().
–
2.在您的作用域中绑定可由服务修改的身份验证对象:
角度:
$scope.auth = memberService.authenticationData;
部分:
<li>{{auth.isAuthenticated ? 'Welcome ' + user.firstname + '!'}}</li>
–
而且,就像@Govan所建议的那样,你应该更喜欢像ngShow这样的指令而不是手动的JS测试:
<li ng-show="auth.isAuthenticated">Welcome {{user.firstname}}!</li>