angularjs - 强制重新评估 ng-if

Question

我的应用程序上有一个标题，其中包含“登录”/“创建帐户”选项。当用户登录时，我需要上述替换“退出”选项。

但是，当用户登录时，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>

在我的 Controller 中，我正在设置 的值已认证 通过调用服务:

 $scope.isAuthenticated = memberService.isAuthenticated();

标题值会改变的唯一方法是如果我刷新整个页面 - 为什么会这样？ ng-if 不应该重新评估变量并相应地更新 View 吗？

这是否意味着 ng-if 仅以一种方式绑定(bind)？那么我能做些什么来完成这项工作呢？

谢谢

安德鲁

Answer 1

您的 Controller 代码仅在关联模板的加载时间被调用。这意味着变量 不会再影响 之后。

但是，数据绑定(bind)在任何地方都有效，包括 if ngIf .要使用它并根据前面的解释，我建议您使用两个简单而干净的解决方案:

1. 绑定(bind)功能 (或服务)在您的 Controller 范围内:

Angular :

$scope.isAuthenticated = memberService.isAuthenticated;

部分的:

<li>{{isAuthenticated() ? 'Welcome ' + user.firstname + '!'}}</li>

注意括号的使用:这将使 Angular 评估 isAuthenticated()在每个摘要循环中。

-

2. 绑定(bind)认证 对象 在您可以由服务修改的范围内:

Angular :

$scope.auth = memberService.authenticationData;

部分的:

<li>{{auth.isAuthenticated ? 'Welcome ' + user.firstname + '!'}}</li>

-

此外，就像@Govan 建议的那样，您应该更喜欢 ngShow 这样的指令而不是手动 JS 测试:

<li ng-show="auth.isAuthenticated">Welcome {{user.firstname}}!</li>