Question

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

这是我的HTML：

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

这是我的控制器：

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评估为真？

Answer 1

你可以使用ng-include和vm.isLoggedIn可以是url，当它不是false时会包含例子：

<button ng-click="vm.isLoggedIn=user==authenticated?'put url hier':false">Include</button>
<div ng-include="vm.isLoggedIn"></div>

Answer 2

您需要检查两件事。

在你的HTML中确保你使用＆＃34;控制器作为＆＃34;符号和控制器命名为vm：

ng-controller =＆＃34; whateverCtrl as vm＆＃34;

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

确保实际调用了vm.login方法，因此该标志实际上设置为true。您还应该将控制器中的标志最初设置为true，以查看该标志实际上是否具有您想要的效果。一旦你看到了这个东西，然后再把它变成假，然后从那里继续。

即使这可能不是问题，我也会像这样编写一个标记检查：

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

如果用户已通过身份验证，则显示视图

2 个答案: