angularjs – 强制重新评估ng-if

前端之家收集整理的这篇文章主要介绍了angularjs – 强制重新评估ng-if前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的应用程序上有一个标题,其中包含“登录”/“创建帐户”选项.当用户登录时,我需要上述内容来交换“注销”选项.

但是,当用户按预期登录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>

猜你在找的Angularjs相关文章