Javascript 用户登录后如何更改div

我正在建立一个网站，我想做一个单页的应用程序。Iam使用NodeJ作为后端，使用angular作为前端。我遇到的问题是，当用户未登录时，我想显示一个特定的div，当用户登录时，应该显示另一个div。最好的办法是什么

据我所知，我已经使用ng if作为两个div的属性，我想将它们相互替换。我有一个角度函数，用于验证登录会话的名称

isloggedin（）

所以我在一个div中使用了

，在另一个div中使用了

因此，在第一个请求中，页面未登录，条件正常工作。但是在我登录之后，第二个的就没有出现了

这是我错误地期望发生的事情，还是有其他原因导致了这一切的发生。我检查了函数的值，它在一个条件下有数据，在另一个条件下有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 -->

记得
提交

您的方法是正确的，但可能是您没有正确定义

checkLoggedin（）

，也可能是您使用了错误的方法。
您也可以用不同的方式来处理它，
如果<代码>ng模型<代码>变量上的<代码>ng条件

<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>

如果触摸用户名fielld
如果未触及用户名字段

如我所见，模块

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

---

通过这种方式，我们可以确保模型具有更新的值，并且正确的if块将添加到DOM。

我认为问题在于模型中没有任何更改，因此angular不会再次触发摘要循环，这就是为什么登录后不会再次触发

checkLoggedin

的原因。你的意思是更改div的顺序，我说得对吗…？当值更改时，它不会自动触发吗？如果不更改顺序，我的意思是让angular知道有更改，然后触发摘要循环，你必须更改模型。你能添加一些代码吗？！我用html中的条件代码和表单代码对我的问题进行了编辑。我可以知道如何触发角度，以了解其变化。

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

<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');
    };
});