Question

我的主页面中有导航，只有登录用户才需要。现在我想隐藏登录页面的导航。所以我最初使用未定义的标志变量来隐藏登录页面中的导航。然后在用户登录后我将标志值设置为1并重定向到仪表板页面，以便仪表板页面显示导航。但问题是虽然我成功设置了标志值导航菜单不再出现。它似乎是标志值没有效果。

简而言之，我的目标是从登录页面隐藏导航菜单，但将其显示给所有其他页面。那么如何解决问题？我是朝着正确的方向前进还是有更好的方法来实现这一目标？

INDEX.HTM

<body ng-app="myApp">
  <div ng-controller="logCtrl">
    <div ng-if="flag==1"> 
      <p><a href="#/">Main</a></p>
      <a href="#login">Login</a>
      <a href="#dashboard">dashborad</a>
    </div>
  </div>

  <div ng-view></div>
  <script>
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
      $routeProvider
        .when("/", {
          templateUrl : "login.htm"
        })
        .when("/login", {
          templateUrl : "login.htm",
          controller : "logCtrl"
        })
        .when("/dashborad", {
          templateUrl : "dashborad.htm",
          controller : "dashboradCtrl"
        });
    });


    app.controller('logCtrl', function ($scope,$location,$http) {
      $scope.login = function () {
        var request = $http({
          method: "post",
          url: "ajax/login.php",
          data: {
            username: $scope.username,
            password: $scope.password
          },
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });

        request.success(function (data) {
          if(data == "1") {
            $scope.flag=1;
            $location.path('/dashboard');
          } else {
            $scope.flag=0;
          }
        });
      }
    });

  </script>
</body>

login.htm

<div class="panel panel-body login-form">                           
  <div class="form-group has-feedback has-feedback-left">
    <input type="text" class="form-control"  ng-model="username" placeholder="Username">
  </div>  
  <div class="form-control-feedback">
      <i class="icon-user text-muted"></i>
  </div>
</div>

<div class="form-group has-feedback has-feedback-left">
  <input type="password" class="form-control" ng-model="password" placeholder="Password">
  <div class="form-control-feedback">
    <i class="icon-lock2 text-muted"></i>
  </div>
</div>
<span>{{responseMessage }}{{flag}}</span>                               
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block" ng-click="login()">Sign in</button>
  </div>
</div>

Answer 1

只是一个建议： 您最好使用通常的布尔值，例如$scope.flag = true或$scope.flag = false。在你身上ng-if：

<div ng-controller="logCtrl" ng-if="flag">

在你的控制器中：

app.controller('logCtrl', function ($scope,$http) {
        $scope.login = function () {
                var request = $http({
                    method: "post",
                    url: "ajax/login.php",
                    data: {
                        username: $scope.username,
                        password: $scope.password
                    },
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                });

                request.success(function (data) {
                    if(data == "1"){
                       $scope.flag = true;
                    }
                    else {
                        $scope.flag = false;
                    }
                });
        }
});

我同意@StanislavKvitash，在同一个标签上使用ng-if和ng-controller并不是一个好主意。最好添加另一个内部div并将ng-if设置为它。所以尝试使用这个HTML：

<body ng-app="myApp">
    <div ng-controller="logCtrl">
        <div ng-if="flag">
            <p><a href="#/">Main</a></p>

            <a href="#login">Red</a>
            <a href="#dashboard">Green</a>
        </div>
    </div>

   <div ng-view></div>
   ...
</body>

“我的目标是从登录页面隐藏导航菜单，但将其显示在所有其他页面上”

如果您只想为/login隐藏导航，只需在logCtrl的开头硬编码标记值，如下所示：$scope.flag = 0，导航将在{{/login时隐藏1}}（并且您不需要if/else语句，只需对标志值进行硬编码。）

隐藏/显示angularjs页面中的导航

1 个答案: