web-dev-qa-db-fra.com

Comment utiliser angular ng-hide en fonction de la page / route sur laquelle je suis actuellement?

avoir une application angular que je souhaite masquer l'une des 'vues incluses' si la vue principale est la vue de la page d'accueil.

<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>
javascriptangularjsng-showng-hide
18
silvster27

Vous pouvez injecter soit $route ou $location dans votre contrôleur, récupérez la valeur nécessaire dans l'un de ces services et utilisez-la dans ng-show ou ng-if.

Exemple d'utilisation de $route et $location vous pouvez voir ici .

Voici l'une des façons possibles de le faire:

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

21
Vadim

Utilisez simplement ng-show avec une expression négative:

<div id=includedView ng-view="included" ng-show="location != '/main'"></div>

Vous devrez définir la valeur de location sur votre contrôleur $scope dans votre contrôleur; en utilisant éventuellement le $route ou $location fournisseurs.

5
John Weldon

Si vous utilisez des routes, vous pouvez exécuter une logique à chaque changement de route dans le bloc resolve du fournisseur de route.

Dans l'exemple ci-dessous, j'utilise un service SystemService personnalisé qui stocke l'emplacement et diffuse à son tour un événement sur $ rootScope. Dans cet exemple, la navigation est en dehors des vues gérées par les contrôleurs routés et possède son propre contrôleur:

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: '/'
  });
}]);

// dans SystemServce:

function fireNavEvent(obj){
    this.showNav = obj.showNav;
    $rootScope.$broadcast('navEvent',obj);
}

// puis dans le contrôleur de navigation:

$scope.$on("navEvent", function(evt,args){
  $scope.showNav = SystemService.showNav;
  // also some logic to set the active nav item based on location
});

Il existe d'autres moyens d'y parvenir, par exemple, vous pouvez simplement diffuser le changement de navigation sur $rootScope directement depuis la configuration des routes.

Vous pouvez également injecter $ location dans votre contrôleur et définir la visibilité en fonction de cela.

2
Ade