have an angular application that I want to hide one of the 'included views' if the main view is the homepage view.
<div id="page" ng-class="{ showNav: $root.showNav }">
<header id="pageHeader" ng-controller="HeaderCtrl" data-ng-include="'views/includes/header.html'"></header>
<div id="pageHero" ng-show='$rootScope.fullView' ng-controller="MainsearchCtrl" data-ng-include="'views/mainSearch.html'"></div>
<div id="pageContent" ng-view=""></div>
</div>
You can inject either $route
or $location
into your controller, fetch needed value from one of these services and use it in ng-show
or ng-if
.
Example of using $route
and $location
you can see here.
Here is one of possible ways of doing it:
JavaScript
angular.module('app', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/one', {
controller: 'routeController',
templateUrl: 'routeTemplate.html'
}).
when('/two', {
controller: 'routeController',
templateUrl: 'routeTemplate.html'
}).
otherwise({
redirectTo: '/one'
})
}]).
controller('routeController', ['$scope', '$location', function($scope, $location) {
$scope.showPageHero = $location.path() === '/one';
}]);
routeTemplate.html
<div>
<h1>Route Template</h1>
<div ng-include="'hero.html'" ng-if="showPageHero"></div>
<div ng-include="'content.html'"></div>
</div>
Plunker: http://plnkr.co/edit/sZlZaz3LQILJcCywB1EB?p=preview
Just use ng-show with a negative expression:
<div id=includedView ng-view="included" ng-show="location != '/main'"></div>
You'll have to set the value of location
on your controller $scope
in your controller; possibly using the $route
or $location
providers.
If you use routes you can run some logic on each route change in the resolve
block in the routeprovider.
In the example below I'm using a custom SystemService service that stores the location and in turn broadcasts an event on $rootScope. In this example the navigation is outside of the views managed by the routed controllers and has its own controller:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/welcome.html',
controller: 'WelcomeCtrl',
resolve: {
load: function(SystemService){
SystemService.fireNavEvent({showNav:false,location:'/'});
}
}
}).
when('/other', {
templateUrl: 'partials/other.html',
controller: 'ElseCtrl',
resolve: {
load: function(SystemService){
SystemService.fireNavEvent({showNav:true,location:'/other'});
}
}
}).
otherwise({
redirectTo: '/'
});
}]);
// in SystemServce:
function fireNavEvent(obj){
this.showNav = obj.showNav;
$rootScope.$broadcast('navEvent',obj);
}
// then in the navigtion controller:
$scope.$on("navEvent", function(evt,args){
$scope.showNav = SystemService.showNav;
// also some logic to set the active nav item based on location
});
There are other ways to achieve this, for example you could just broadcast the navigation change on $rootScope
directly from the routes config.
You could also inject $location into your controller and set the visibility based on that.
来源:https://stackoverflow.com/questions/22338743/how-do-i-use-angular-ng-hide-based-on-the-page-route-that-i-am-currently-on