Angularjs ng显示问题与ng路线

Angularjs ng显示问题与ng路线,angularjs,ngroute,ng-show,Angularjs,Ngroute,Ng Show,我是角形世界的新手。我正在尝试创建一个登录页面。当用户登录时,我想在导航栏中显示一些内容 目前我正在使用ng show和ng route。当我不使用ng route时,ng show工作正常,但当我使用ng route时,ng show不工作。我不想使用angular ui路由器。我做错了什么。有人能帮我吗 角度配置 app.config(['$routeProvider', function($routeProvider) { $routeProvider

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

目前我正在使用ng show和ng route。当我不使用ng route时,ng show工作正常,但当我使用ng route时,ng show不工作。我不想使用angular ui路由器。我做错了什么。有人能帮我吗

角度配置

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>

切换导航
  • 名称
这将帮助您

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

按钮1

按钮2

您将希望在此处使用摘要循环,并删除
ng show
,因为它的使用很容易被误认为是更优雅、更容易理解的
ng if

简言之:

  • AJAX调用将触发摘要循环
  • ng if
    将在不满足DOM的条件时主动删除DOM,从而绘制更少的DOM
  • ng if
    中更改AJAX调用的值将起作用,而不是隐藏DOM元素,因为它无论如何都是可见的
ng斗篷
班把我甩了;您可能不需要这样做,因为使用
ngif
,在您真正需要它之前,它不会出现在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需要更改为什么(是的,我更喜欢绝对真理而不是真实性):


我认为
ngRoute
不会对
ngshow
产生任何影响。工作正常检查此工作演示:

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



  • @Makoto,如果你能看一下代码,它是不言自明的。会有更好的答案来解释OP需要做什么,而不是给他们代码。现在,你给他们的只是一些东西,可以复制粘贴到他们的代码中,并祈祷它能工作。这个答案与操作代码或问题有什么关系?@Dockerrr创建一个plunker或工作代码!我想不出这条路线叫什么。。解释一下,兄弟。我的代码没有问题。当我使用ng路线和ng show时,ng show不起作用。$Scope存在一个问题,使用ngroute对ng show没有任何影响,这是毫无意义的。还不清楚控制器作用域相对于所示html的位置。另外,看起来您正在将bootstrap.js与angular结合使用,这是一个糟糕的想法。换句话说,相对于所显示的html,您的
    ng视图
    在哪里?兄弟,我的视图工作正常,他们没有问题。如果登录成功,我试图在导航栏上显示一些内容,但我们甚至不知道您的导航栏在哪个控制器范围内。如果你不这样做,那很可能是问题的一部分。请注意,route config中每个路由的控制器仅包括该路由模板的
    ng视图中的内容,ng视图外没有任何内容,IM只有一个控制器。但这与OP的情况根本不相关。可以通过包含
    ng视图
    并概述ng视图范围与外部范围的对比,将其扩展到正确的轨道上。OP不明白如果你读了上面的评论,你能帮我吗?问题是关于show,为什么会出现ng if。@Aravind:我发现在处理DOM的“隐藏”元素时,
    ng if
    更简洁,也更容易混淆。简单地说,如果它在那里,它就在DOM中;如果不是,它将根本不在DOM中。
    <div ng-if="myvalue2 === true">