javascript - AngularJS 替换了特定页面上的指令？

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>

header 指令是

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