我是角质世界的新手。我正在尝试创建一个登录页面。当用户登录时,我想在Navbar中显示一些内容。
目前我正在使用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>
我认为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>
您将要在此处使用摘要周期,然后取消ng-show
,因为它的使用很容易被误认为更优雅,更简单的ng-if
。p>简而言之:
- ajax调用将触发摘要周期。
-
ng-if
如果未满足条件,将主动删除 dom,从而少dom。 - 更改
ng-if
中AJAX调用的值,而不是隐藏DOM元素,因为无论如何它都可以看到。
ng-cloak
课程使我失望;您可能不需要那里,因为使用ng-if
,它在DOM中不会在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">
这将帮助您,
<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