Как использовать angular ng-hide на основе страницы/маршрута, на котором я сейчас нахожусь?

есть угловое приложение, в котором я хочу скрыть одно из «включенных представлений», если основным представлением является представление домашней страницы.

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

javascript angularjs ng-show ng-hide
person silvster27    schedule 11.03.2014    source источник

Ответы (3)


arrow_upward
21
arrow_downward

Вы можете внедрить $route или $location в свой контроллер, получить необходимое значение из одного из этих сервисов и использовать его в ng-show или ng-if.

Пример использования $route и $location вы можете посмотреть здесь.

Вот один из возможных способов сделать это:

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>

Планкер: http://plnkr.co/edit/sZlZaz3LQILJcCywB1EB?p=preview

person Vadim    schedule 12.03.2014
comment
Это именно то, что я хочу сделать, только div, содержащий teh ng-if, на самом деле находится на индексной странице и поэтому не работает. - person silvster27; 14.03.2014
comment
Допустимо ли иметь несколько методов $scope в контроллере? Пример: controller('routeController', ['$scope', '$location', function($scope, $location) { $scope.showPageHero = $location.path() === '/one'; $scope.showNewHeader = $location.path() === '/two'; }]); - person Kyle Vassella; 17.12.2016
comment
@KyleVassella Конечно, это не методы, а логические значения, и у вас может быть несколько из них в одном и том же $scope. Итак, это абсолютно справедливо. - person Vadim; 18.12.2016

arrow_upward
5
arrow_downward

Просто используйте ng-show с отрицательным выражением:

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

Вам нужно будет установить значение location на вашем контроллере $scope в вашем контроллере; возможно, используя поставщиков $route или $location.

person John Weldon    schedule 11.03.2014
comment
Не очень полезный ответ, если вы уже не понимаете $route и $location. В этом случае вы, вероятно, можете понять это для себя. - person bert; 14.09.2016

arrow_upward
2
arrow_downward

Если вы используете маршруты, вы можете запускать некоторую логику для каждого изменения маршрута в блоке resolve в routeprovider.

В приведенном ниже примере я использую пользовательскую службу SystemService, которая сохраняет местоположение и, в свою очередь, передает событие в $rootScope. В этом примере навигация находится за пределами представлений, управляемых маршрутизируемыми контроллерами, и имеет собственный контроллер:

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

// в СистемСервис:

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

// затем в навигационном контроллере:

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

Есть и другие способы добиться этого, например, вы можете просто транслировать изменение навигации на $rootScope непосредственно из конфигурации маршрутов.

Вы также можете ввести $location в свой контроллер и установить видимость на основе этого.

person Ade    schedule 12.03.2014