javascript - 显示用户是否通过身份验证的 View

Question

当用户通过身份验证时，我无法显示 View 。为什么简单的 ng-show="vm.isLoggedIn" 在评估为 true 时不会显示 View ？

这是我的HTML:

<div ng-show="vm.isLoggedIn">
    <div ng-view></div>
</div>

这是我的 Controller :

var MainCtrl = function(userAccount) {
    var vm = this;
    vm.isLoggedIn = false;
    vm.userData = {
        userName: "",
        email: "",
        password: "",
        confirmPassword: ""
    };
    vm.login = function () {
        vm.userData.grant_type = "password";
        vm.userData.userName = vm.userData.email;

        userAccount.login.loginUser(vm.userData, function (data) {
            vm.isLoggedIn = true;
            vm.message = "";
            vm.password = "";
            vm.token = data.access_token;
        });
    }
}

这是我创建的userAccount 服务。

var userAccount = function ($resource, appSettings) {
    return {
        registration: $resource(appSettings.serverPath + "/api/Account/Register", null,
            {
                "registerUser": { method: "POST" }
            }),
        login: $resource(appSettings.serverPath + "/Token", null, 
            {
                "loginUser": {
                    method: "POST",
                    headers: { "Content-Type": "application/x-www-form-urlencoded" },
                    transformRequest: function (data, headersGetter) {
                        var str = [];
                        for (var d in data) {
                            str.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
                        }
                        return str.join("&");
                    }
                }
            })
    }
}

我认为这与 MainCtrl 或 userAccount 无关，但我将它们包含在上下文中。

ng-show 是否会阻止显示任何 ng-view？即使 ng-show 的计算结果为 true？

Answer 1

您需要检查两件事。

1. 在您的 html 中，确保您使用的是“controller as”表示法，并且您的 Controller 被命名为 vm:

   ng-controller="whateverCtrl 作为虚拟机"

如果您不这样做，那么 vm.isLoggedIn 将无法正确评估。

确保您的 vm.login 方法确实被调用，因此该标志实际上设置为 true。您还应该最初将 Controller 中的标志设置为 true，以查看该标志实际上具有您想要的效果。一旦你看到这个东西，然后再次将其设置为 false 并从那里继续。

即使这可能不是问题，我实际上也会编写如下所示的标志检查:

<div ng-show="vm.isLoggedIn === true">
    <div ng-view></div>
</div>