Question

我正在建立一个网站，我希望制作单页应用程序。我使用nodejs作为后端，使用angular作为前端。我坚持的事情是我想在用户未登录时显示特定div，如果登录其他div应该显示。实现这一目标的最佳方式是什么。

据我所知，我已经使用ng-if作为我想要互相替换的div的属性。我有一个角度函数，用于使用名称isloggedin()验证登录的sesssion。

所以我在一个div中使用了<div ng-if="!checkLoggedin()">，在其他div中使用了<div ng-if="checkLoggedin()">。

因此，在第一次请求时，页面未登录，条件正常工作。但是我从第二次登录后没有出现。

这是我错误预期会发生的事情，还是还有其他任何事情可以实现这一点。我检查了函数的值，它在一个条件下有数据，在其他条件下有0。我错了。

添加了条件代码。

var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) {
    var deferred = $q.defer();

    $http({
        method: 'GET',
        url: "http://localhost:3000/loggedin"
    }).success(function (user) {
        if (user !== '0') {
            $rootScope.message = 'You are log in.';
            $timeout(deferred.resolve, 0);
            deferred.resolve();
            $location.url('/home');

        } else {
            $rootScope.message = 'You need to log in.';
            $timeout(function () {
                deferred.reject();
            }, 0);
            deferred.reject();
            $location.url('/login');
        };
    });

这是表单代码。

<form action="/#/home" ng-submit="login(user)">
                                            <div class="form-group">
                                                <div class="input-group input-group-in ui-no-corner no-border bordered-bottom bg-none">
                                                    <div class="input-group-addon"><i class="fa fa-envelope text-muted"></i></div>
                                                    <input class="form-control" placeholder="email" ng-model="user.email">
                                                </div>
                                            </div><!-- /.form-group -->
                                            <div class="form-group">
                                                <div class="input-group input-group-in ui-no-corner no-border bordered-bottom bg-none">
                                                    <div class="input-group-addon"><i class="fa fa-lock text-muted"></i></div>
                                                    <input type="password" class="form-control" placeholder="Password" ng-model="user.password">
                                                    <div class="input-group-addon"><small><a href="/#/forgotpass">Forgot?</a></small></div>
                                                </div>
                                            </div><!-- /.form-group -->
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="nice-checkbox nice-checkbox-inline">
                                                            <input type="checkbox" name="rememberSignIn1" id="rememberSignIn">
                                                            <label for="rememberSignIn1">Remember</label>
                                                        </div>
                                                    </div><!-- /.cols -->
                                                    <div class="col-md-6">
                                                        <button type="submit" class="btn btn-sm btn-block btn-info" style="margin-top:5px" >SUBMIT</button>
                                                    </div><!-- /.cols -->
                                                </div><!-- /.row -->
                                            </div><!-- /.form-group -->
                                        </form><!-- /form -->
                                    </div><!-- /.panel-body -->

Answer 1

正如我所见，块

<div ng-if="!checkLoggedin()">

和

<div ng-if="checkLoggedin()">

将在DOM加载（页面加载）上执行。所以模型没有机会更新。这里正确的方法是在if块中使用范围变量

<div ng-if="isLoggedIn"> ... <div ng-if="!isLoggedIn">

并更新服务调用的成功处理程序中的变量值，例如

var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) {
var deferred = $q.defer();

$http({
    method: 'GET',
    url: "http://localhost:3000/loggedin"
}).success(function (user) {
    if (user !== '0') {
        // set value here
        $rootScope.isLoggedIn = true;

        $rootScope.message = 'You are log in.';
        $timeout(deferred.resolve, 0);
        deferred.resolve();
        $location.url('/home');

    } else {
        $rootScope.message = 'You need to log in.';
        $timeout(function () {
            deferred.reject();
        }, 0);
        deferred.reject();
        $location.url('/login');
    };
});

通过这种方式，我们可以确定模型已更新了值，并且正确的if块将被添加到DOM中。

Answer 2

您的方法是正确的，但可能是您没有正确定义checkLoggedin()或者您使用的方式不对。你也可以用不同的方式来接近它，
在ng-if变量

上应用ng-model条件

<label> User Name </label>
<input ng-model="username" />

所以在这里你可以在用户名上添加条件，例如： -

<div ng-if="username !== 'null' || 'undefined'"> If username fielld is touched </div>

<div ng-if="username === 'null' || 'undefined'"> If username field is not touched </div>

如何在用户登录后更改div

2 个答案: