Question

我是角色世界的新手。我正在尝试创建登录页面。当用户登录时，我想在导航栏中显示一些内容。

目前我正在使用ng-show和ng-route。当我没有使用ng-route时，ng-show工作正常但是当我使用ng-route时，ng-show不起作用。我不想使用angular-ui-router。我做错了什么。任何人都可以帮助我

Angular Config

app.config(['$routeProvider', function($routeProvider) {
            $routeProvider
            .when('/', {
               templateUrl: 'login.html',
               controller: 'ctrl'
            })
            .when('/logged', {
               templateUrl: 'logged.html',
               controller: 'ctrl'  
            })
            otherwise({
               redirectTo: '/'
            });
         }]);
app.controller("ctrl",['$scope','$http','$location',function($scope,$http,$location){
            $scope.myvalue2=false;
         $scope.login = function()
         {
          //here i making the $http.post to login on success im changing $scope.myvalue2=true;
         }
         }]);

HTML

<nav class="navbar-default navbar-dark bg-primary">
   <div class="navbar">
   <div class="container-fluid navi">
     <div class="navbar-header" style="padding-bottom:10px">
                           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                             <span class="sr-only">Toggle navigation</span>
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                           </button>
                    <ul class="navbar-brand " style="list-style:none;padding-top:10px;"><li>name</li></ul>
        </div>
    <div ng-show="myvalue2" class="ng-cloak">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-top:10px">
       <ul class="nav navbar-nav">
            <li><a href="pages/enhance.jsp#section0" style="font-size:14px;">About</a></li>
           <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:14px;">Settings</a></li>
        </ul>
    </div>
    </div>
    </div>
    </div>
</nav>

Answer 1

我不认为ngRoute会对ng-show产生任何影响。它正常工作，检查这个工作演示：

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.myvalue2 =false;
    $scope.login = function() {
      $scope.myvalue2=true;
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <a ng-click="login()">Login</a>
    <div ng-show="myvalue2">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-top:10px">
       <ul class="nav navbar-nav">
            <li><a href="pages/enhance.jsp#section0" style="font-size:14px;">About</a></li>
           <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:14px;">Settings</a></li>
        </ul>
    </div>
    </div>
</div>

＆＃13;

Answer 2

您将要在此处使用摘要周期，并取消ng-show，因为它的使用很容易被误认为更优雅，更易于理解ng-if。

简而言之：

AJAX调用将触发摘要周期。
ng-if将主动删除 DOM，从而减少了DOM。
更改ng-if中AJAX调用的值将有效，而不是隐藏DOM元素，因为无论如何它都有资格显示。

ng-cloak课让我失望;你可能不需要那个，因为ng-if，在你真正需要它之前它不会在DOM的任何地方。

您的控制器可能是什么样的：

app.controller("ctrl", [
    '$scope',
    '$http',
    '$location',
    function ($scope, $http, $location) {
        $scope.myvalue2 = false;
        $scope.login = function () {
          $http.get('/path/to/your/request', function(data) {
              $scope.myvalue2 = true;
          });
        }
    }]);

你的DOM需要改变什么（是的，我更喜欢绝对真理到真实性）：

<div ng-if="myvalue2 === true">

Answer 3

这会对你有帮助，

<div ng-app="myApp" ng-controller="myCtrl">
      <button class="btn btn-success" type="text" ng-model="firstName" ng-show="display" ng-click="display=!display"> BUTTON 1</button>
      <br />
      <button class="btn btn-warning" ng-click="display=!display" ng-model="lastName" ng-show="!display"> BUTTON 2
    </button>
</div>

DEMO

Angularjs ng-an ng-route问题

3 个答案: