如何根据我当前所在的页面/路线使用 angular ng-hide? [英] How do I use angular ng-hide based on the page/route that I am currently on?

问题描述

有一个角度应用程序，如果主视图是主页视图，我想隐藏其中一个包含的视图".

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

解决方案

您可以将 $route 或 $location 注入您的控制器，从其中之一获取所需的值这些服务并在 ng-show 或 ng-if 中使用.

使用 $route 和 $location 的例子你可以看到 此处.

这是一种可行的方法:

JavaScript

angular.module('app', ['ngRoute']).配置(['$routeProvider'，函数($routeProvider){$routeProvider.当('/一个'，{控制器:'路由控制器'，templateUrl: 'routeTemplate.html'}).当('/两个'，{控制器:'路由控制器'，templateUrl: 'routeTemplate.html'}).除此以外({重定向到:'/一个'})}]).控制器('routeController', ['$scope', '$location', function($scope, $location) {$scope.showPageHero = $location.path() === '/one';}]);

routeTemplate.html

<h1>路由模板</h1><div ng-include="'hero.html'" ng-if="showPageHero"></div><div ng-include="'content.html'"></div>

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

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

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

解决方案

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

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

这篇关于如何根据我当前所在的页面/路线使用 angular ng-hide?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！