Question

我有一个带有主视图和2指令的index.html，用于站点标题，一个用于页脚：

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

标头指令是

(function() {

'use strict';

angular.module('app').directive('pbDsHeader', function() {
  return {
    restrict: 'A',
    templateUrl: 'modules/main/templates/header.html',
    controller: 'HeaderController as header'
  };
});

})();

好的，工作正常。有几页不需要标题，这里我使用body类来隐藏标题。

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

最好的办法是什么？

Answer 1

要执行此操作，您必须使用UI-Router＆＃39; Named Views：

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

Answer 2

我做的一种方法是设置多个指令模板，并使用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>

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

2 个答案: