Проблема с Angularjs ng-show с ng-route

Question

Я новичок в угловом мире. Я пытаюсь создать страницу входа в систему. При входе в систему я хочу показать некоторое содержимое на навигационной панели.

В настоящее время я использую ng-show и ng-route. Когда я не использую ng-route, ng-show работает нормально, но когда я использую ng-route, ng-show не работает. Я не хочу использовать угловой ui-router. Что я делаю неправильно. Может кто-нибудь помочь мне

Угловое 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

Это поможет вам,

<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

Answer 2

Вы собираетесь использовать цикл дайджеста здесь и покончите с ng-show, так как его использование легко ошибочно принимается за более изящный и простой в понимании ng-if.

Короче:

• AJAX звонки вызовет цикл дайджеста.
• ng-if активно удалить DOM, если его состояние не выполнено, при этом рисунок меньше DOM.
• Изменение значения в вызове AJAX в ng-if будет работать вместо скрытия элемента 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 будет необходимо изменить (и да, я предпочитаю абсолютную истину truthiness):

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

Answer 3

Я не думаю, что ngRoute окажет какое-либо влияние на ng-show. Это работает отлично Проверите это работает демо:

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.myvalue2 =false; 
 
    $scope.login = function() { 
 
     $scope.myvalue2=true; 
 
    } 
 
});

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