18

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

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

3 回答 3

21

您可以将其中一个$route或$location注入到您的控制器中，从这些服务之一中获取所需的值并在ng-showor中使用它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';
  }]);

路由模板.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

于 2014-03-12T00:01:41.923 回答
5

只需将 ng-show 与否定表达式一起使用：

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

您必须location在控制器$scope中设置控制器的值；可能使用$route或$location提供者。

于 2014-03-11T23:53:06.993 回答
2

如果您使用路由，您可以在路由提供程序的resolve块中对每个路由更改运行一些逻辑。

在下面的示例中，我使用了一个自定义 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 注入您的控制器并基于此设置可见性。

于 2014-03-12T00:01:31.767 回答