AngularJS：绑定无法正常工作

Question

我有一个登录页面，显示在我的 index.html 页面中。 index.html 页面可以控制一个导航栏，在用户成功登录之前我不想显示该导航栏。但是，在他们登录后，导航栏 ng-show 属性不会更新，因为我有它代码。这是说明的代码：

<nav class="navbar navbar-inverse" ng-controller="loginController" ng-show={{valid}}>
    <div class="collapse navbar-collapse navbar-collapse-links">
        <ul class="nav navbar-nav">
            <li><a ui-sref="addUser" class="addUser" >Add User</a></li>
            <li><a ui-sref="listUser" class="mdUser">Modify User</a></li>
            <li><a ui-sref="login" class="mdUser">Logout</a></li>
        </ul>
    </div>
</nav>

我的控制器内部是这样的：

$scope.valid = false;
function login() {
    AuthenticationService.Login(vm.user.username, vm.user.password, function (response) {
        if (response.success) {
            AuthenticationService.SetCredentials(response.token.UserName, response.token.TokenId);
            $scope.valid = true;
            $location.path('/');
            } else {
                //FlashService.Error(response.message);
                vm.error = response.message;
                vm.dataLoading = false;
            }
    ....
    )};
}

这些是对代码的粗略复制和粘贴，仅包含我认为当前问题所必需的内容。

我可以手动将声明更改为 true 或 false，并让导航栏正确运行。否则，在有效登录尝试后导航栏不会显示，并且当我登录后在控制台中检查 html 时，ng-show 方法仍然显示为 false。

问题：为什么在我的成功函数中重新分配有效绑定后无法正确更改？

Answer 1

如果您的 AuthenticationService 没有抽出摘要循环，Angular 将不会更新其绑定，因为它不知道发生了什么变化。

尝试将 .Login 回调的主体包裹在 $scope.$apply() 中。

此外，您在验证用户身份后立即离开此视图，因此您设置 $scope.valid = true; 的范围消失了。

您可以尝试在根作用域上设置一个标志，例如：$rootScope.isLoggedIn = true; 并对其进行绑定，因为根作用域在应用程序的整个生命周期内都会保留。

您最好的选择是将身份验证状态存储在您的服务中并与之绑定。由于服务是单例的，因此视图之间的状态也会保留。

Answer 2

尝试改变，

<nav class="navbar navbar-inverse" ng-controller="loginController" ng-show={{valid}}>

到

<nav class="navbar navbar-inverse" ng-controller="loginController" ng-show="valid">

Answer 3

从 ng-show 中删除 {{ }}。这是您的代码的一个问题。

ng-show="valid"

并查看此以获取更多信息：

http://jaketrent.com/post/when-to-use-curlies-in-angular-directives/