不能在角度使用ng-show和ng-hide

时间:2016-10-08 23:43:45

标签: angularjs node.js ejs

我正在尝试从我的角度控制器访问数据。该文件如下。以下是相关的范围和变量。

  • 这个想法是当statusCode为401时,invalid_login必须变为true。
  • 当statusCode为200(否则为下面的条件)时,logged_in必须变为true。

想法是

 $scope.invalid_login    = true;
        $scope.unexpected_error = false;
        $scope.logged_in        = false;


        $http({

            method: "POST",
            url: "/getUserInfo",

            data: {

                "username"        : $scope.username,

            }

        }).success(function(data) {

            if (data.statusCode == 401) {

                $scope.invalid_login    = false;
                $scope.unexpected_error = true;
                $scope.logged_in = false;

                alert('Status Code: '+data.statusCode);

            } else if(data.statusCode == 200){

                console.log('FROM LOGINCONTROLLER : ' + data.username);
                console.log('Status Code : ' + data.statusCode);

                $scope.username         = data.username;
                alert('Status Code: '+data.statusCode);
                $scope.invalid_login    = false;
                $scope.unexpected_error = false;
                $scope.logged_in        = true;


            }

        }).error(function(error) {

            $scope.logged_in        = false;        
            $scope.unexpected_error = true;
            $scope.invalid_login    = true;

        });

当我尝试在我的ejs中访问它时,它并不反映预期的行为。

  • 我想在用户未登录时显示登录或注册选项:(logged_in = false和invalid_login = true)。
  • 并希望在(logged_in = true和invalid_login = false)时显示已登录的视图(带退出选项)

以下是我的ejs片段:

<div class                             ="dropdown"  ng-hide="true" style="font-size:small; text-decoration:none; margin-top:6px;">

                                    <a class                       ="dropdown">
                                        <a href                    ="#" style="text-decoration:none; color:#555555" class="dropdown-toggle" data-toggle="dropdown">Hi! <b>{{username}}</b><b class="caret"></b></a>

                                        <ul class                  ="dropdown-menu multi-column columns-1">

                                            <div class             ="row">

                                                <div class         ="col-sm-12">
                                                    <ul class      ="multi-column-dropdown">

                                                        <li class  ="h4"><b><a href="#">My Collection</a></b></li>
                                                        <li><a href="#">Account Settings</a></li>
                                                        <li><form action="logout" method="post">
                                                            <input type="submit" value="Logout"  class="btn btn-success"/>
                                                        </form></li>
                                                        <li><a href="#">Antiques</a></li>
                                                        <li><a href="#">Sports Memorabilia</a></li>
                                                        <li class  ="divider"></li>
                                                        <li class  ="h4"><b><a href="#">Electronics</a></b></li>
                                                        <li>

                                                        </li>
                                                        <li><a href="#">Coins & Paper Money</a></li>
                                                        <li><a href="#">Antiques</a></li>
                                                        <li><a href="#">Sports Memorabilia</a></li>


                                                    </ul>
                                                </div>

                                            </div>
                                        </ul>
                                    </a>
                                </a>
                            </div>



                            <a ng-show="invalid_login">


                            Sign In or Register


                            </a>




                            </li>
                            <li>

1 个答案:

答案 0 :(得分:0)

如最新的角度1版本(https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js

中所述
  

已弃用$http遗留承诺方法successerror。   改为使用标准then方法。

它已弃用但仍受支持,其代码为:

    promise.success = function(fn) {
      assertArgFn(fn, 'fn');

      promise.then(function(response) {
        fn(response.data, response.status, response.headers, config);
      });
      return promise;
    };

response.status 作为第二个参数传递给回调函数,所以你应该检查它

.success(function(data, statusCode) {

        if(statusCode === 200){

            console.log('FROM LOGINCONTROLLER : ' + data.username);
            console.log('Status Code : ' + data.statusCode);

            $scope.username         = data.username;
            alert('Status Code: '+data.statusCode);
            $scope.invalid_login    = false;
            $scope.unexpected_error = false;
            $scope.logged_in        = true;


        }
}).error(function(error, statusCode) {
        // will be false only for 401 status
        $scope.logged_in        = statusCode !== 401;        
        $scope.unexpected_error = true;
        $scope.invalid_login    = true;

        alert('Status Code: ' + statusCode);
    });

最好的是转移到然后(successFunction,errorFunction,notifyFunction)而不是成功,但是你的数据将在 response.data下 response.status

下的状态代码

SUCCESS状态代码为200-299(包括),其余状态将由errorFunction捕获