Question

我有一个Angular网站，其结构如下：

<body ng-app>
<div class="header"></div>
<div class="main" ng-view="website"></div>
<div class="footer"></div>
</body>

我怎样才能使用Angular，只在主页上插入我的标题div和ng-view div之间的div？它将是这样的（仅适用于主页）：

<body ng-app>
<div class="header"></div>
<div>This is the extra div that only exists on home page. But it's outside the ng-view scope.</div>
<div class="main" ng-view="website"></div>
<div class="footer"></div>
</body>

Answer 1

在您使用路由器的控制器中，根据您的routeParam设置范围值，该值指示您所在的页面：

<body ng-app controller="routeController">
    <div class="header"></div>
    <div ng-show="routeParam.page='home'">This is the extra div that only exists on home page. But it's outside the ng-view scope.</div>
    <div class="main" ng-view="website"></div>
    <div class="footer"></div>
</body>

Answer 2

这是模板：

<div ng-if="homepage"> ... </div>

在这里你可以听到路线变化：

app.run(['$rootScope', function($rootScope){

  function isHomepage(){
    // check it
  }

  $rootScope.$on('$routeChangeSuccess', function(event, current, previous){
    $rootScope.homepage = isHomepage(current);
  });
}]);

Answer 3

我会用指令替换那个特殊的div，并注意路由的变化。它比其他解决方案更具说服力。像这样......

app.directive('homeHeader', function() {
 return {
     restrict: 'E',
     transclude: true,
     template: '<div ng-if="isHome" ng-transclude></div>',
     link: function($scope) {
          $scope.isHome = //init
          $scope.$on('$routeChangeSuccess', function() {
           //do something   
          });
     }
 }
});

<body ng-app>
<div class="header"></div>
<home-header>This is the extra div that only exists on home page. But it's outside the ng-view scope.</home-header>
<div class="main" ng-view="website"></div>
<div class="footer"></div>
</body>

在此处阅读$ route：http://docs.angularjs.org/api/ngRoute/service/ $ route

元素仅在使用Angular JS的一个页面上

3 个答案: