web-dev-qa-db-ja.com

現在使用しているページ/ルートに基づいてangular ng-hideを使用するにはどうすればよいですか？

angularアプリケーションがあり、メインビューがホームページビューである場合、「含まれるビュー」の1つを非表示にしたい。

<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

$routeまたは$locationのいずれかをコントローラーに挿入し、これらのサービスの1つから必要な値を取得して、ng-showまたはng-ifで使用できます。

$routeおよび$locationの使用例 here を見ることができます。

これを実行する方法の1つを次に示します。

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

21
Vadim

負の表現でng-showを使用するだけです：

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

コントローラーでlocationの値を設定する必要があります$scopeコントローラー内。おそらく$routeまたは$locationプロバイダー。

5
John Weldon

ルートを使用する場合、ルートプロバイダーのresolveブロックで各ルートの変更に対していくつかのロジックを実行できます。

以下の例では、場所を保存し、$ rootScopeでイベントをブロードキャストするカスタムSystemServiceサービスを使用しています。この例では、ナビゲーションはルーティングされたコントローラーによって管理されるビューの外側にあり、独自のコントローラーがあります。

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

// SystemServceで：

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

//その後、Navigtion Controllerで：

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

これを実現する方法は他にもあります。たとえば、ナビゲーション変更を$rootScopeルート設定から直接。

コントローラに$ locationを挿入し、それに基づいて可視性を設定することもできます。

2
Ade