How Do I Use Angular Ng-hide Based On The Page/route That I Am Currently On?

Question

have an angular application that I want to hide one of the 'included views' if the main view is the homepage view.

Solution 1:

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><divng-include="'hero.html'"ng-if="showPageHero"></div><divng-include="'content.html'"></div></div>

Plunker: http://plnkr.co/edit/sZlZaz3LQILJcCywB1EB?p=preview

Solution 2:

Just use ng-show with a negative expression:

<divid=includedViewng-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.

Baca Juga

Solution 3:

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:

functionfireNavEvent(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.

JavaScript Free

How Do I Use Angular Ng-hide Based On The Page/route That I Am Currently On?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How Do I Use Angular Ng-hide Based On The Page/route That I Am Currently On?"