Javascript AngularJS替代了特定页面上的指令？

我有一个index.html，带有main view和2指令，on用于站点页眉，另一个用于页脚：

 <div class="site">

<!-- header -->
<header pb-ds-header pb-fixed-navbar></header>

<!-- content -->
<div ui-view="" class="view-animate site-content" autoscroll="false"></div>

<!-- FOOTER -->
<footer pb-ds-footer></footer>

</div>

好的，很好用。有一些页面不需要标题，这里我使用

body

类隐藏标题

但是，现在我有几个页面需要显示与站点其他部分不同的标题模板

---

最好的方法是什么？

我这样做的一种方法是设置多个指令模板，并使用

ng show=someVar

隐藏它们，然后使用路由逻辑对范围变量应用false或true来显示或隐藏特定的指令

下面是一个例子：

$scope.modelPaths = {
    impactModel : true,
    sourceFields : false,
    filterModel : false,
    fieldCards : false
};

//apply pathing logic here
$scope.path = function(url) {
    angular.forEach($scope.modelPaths, function(value, model) {
        console.log(model);
        $scope.modelPaths[model] = false;
    });
    $scope.modelPaths[url] = true;
}

在html方面，我使用了以下内容：

<div class="col-md-6 bordered" id="modalData">
    <filter-model ng-show="modelPaths.filterModel"></filter-model>
    <field-cards ng-show="modelPaths.cardModel"></field-cards>
</div>

---

要做到这一点，您需要使用UI路由器：

---

我会为标题使用一个子视图，然后为两个不同的标题使用两个视图。

<div class="col-md-6 bordered" id="modalData">
    <filter-model ng-show="modelPaths.filterModel"></filter-model>
    <field-cards ng-show="modelPaths.cardModel"></field-cards>
</div>

<div class="site">

<!-- header -->
<div ui-view="header"></div>

<!-- content -->
<div ui-view="body" class="view-animate site-content" autoscroll="false"></div>

<!-- FOOTER -->
<footer pb-ds-footer></footer>

</div>

$stateProvider
  .state('some.state', {
    views: {
      header: 'modules/main/templates/header.html',
      body: 'templates/some/body.html'
    }
  })
  .state('some.other.state', {
    views: {
      header: '', // no header in this state
      body: 'templates/other/body.html'
    }
  });