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>

在我的控制器中，我通过调用服务来设置 isAuthenticated 的值：

 $scope.isAuthenticated = memberService.isAuthenticated();

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

这是否意味着ng-if仅限于一种方式？那么我该怎样做才能使这项工作？

由于

安德鲁

Answer 1

仅在关联模板的加载时间内调用您的控制器代码。这意味着变量以后不会再次受到影响。

但是，数据绑定在任何地方都有效，包括ngIf。要使用它并根据之前的解释，我建议你使用两个简单而干净的解决方案：

1。在控制器的范围内绑定功能（或服务）：

角：

$scope.isAuthenticated = memberService.isAuthenticated;

部分：

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

请注意括号的使用：这将使每个摘要循环中的角度评估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>

Answer 2

因为您正在更改值作为服务调用的结果而不是其他一些用户交互，所以没有任何内容可以触发角度的摘要周期。在这些情况下，您通常需要将更改包装在$ apply中以强制摘要：

$scope.$apply(function() {
    $scope.isAuthenticated = memberService.isAuthenticated();
});

有关详细信息，请参阅When to use $scope.$apply

强制重新评估ng-if

2 个答案: