javascript - examples - ¿Cómo uso la ng-hide angular en función de la página/ruta en la que estoy actualmente?

ng-show ng-hide angularjs examples

Question

tengo una aplicación angular que deseo ocultar una de las ''vistas incluidas'' si la vista principal es la vista de la página de inicio.

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

Answer 1

Puede inyectar $route o $location en su controlador, obtener el valor necesario de uno de estos servicios y usarlo en ng-show o ng-if .

Ejemplo de uso de $route y $location que puede ver here .

Aquí está una de las posibles formas de hacerlo:

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

Answer 2

Si usa rutas, puede ejecutar cierta lógica en cada cambio de ruta en el bloque de resolve en el proveedor de ruta.

En el siguiente ejemplo, estoy usando un servicio SystemService personalizado que almacena la ubicación y, a su vez, difunde un evento en $ rootScope. En este ejemplo, la navegación está fuera de las vistas administradas por los controladores enrutados y tiene su propio controlador:

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

// en SystemServce:

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

// luego en el controlador de navegación:

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

Hay otras formas de lograr esto, por ejemplo, podría simplemente transmitir el cambio de navegación en $rootScope directamente desde la configuración de las rutas.

También puede inyectar $ ubicación en su controlador y establecer la visibilidad en función de eso.

Answer 3

Solo usa ng-show con una expresión negativa:

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

Tendrá que establecer el valor de la location en su controlador $scope en su controlador; posiblemente utilizando los proveedores $route o $location .