重用代码但具有自定义内容

Question

我有一堆页面，其中包含用于页面底部按钮和内容的漂亮页脚区域的代码：

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="navbar-inner">
            <footer>
                <a class="btn btn-warning actionButton" href="#/">
                    <i class="glyphicon glyphicon-trash icon-white" />
                    Cancel
                </a>
                <a class="btn btn-primary actionButton" data-ng-click="saveSampleForm(sampleForm)" data-ng-disabled="form.$invalid">
                    <i class="glyphicon glyphicon-ok icon-white" />
                    Save
                </a>
                <div class="version">v{{applicationdata.Version}}</div>
            </footer>
        </div>
    </div>
</nav>

我知道 nginclude 标记，但有没有办法重用这段代码的 nav 部分，但有自定义的 <footer> 内容？按钮会随着页面的变化而变化。也许是指令？还在学习这些东西... 编辑：我知道我可以将 <footer> 内容的代码添加到我的 $scope 中，然后使用 {{footerContent}}，但我更愿意将 html 排除在我的模型之外。

Answer 1

您当然可以这样做。这是一个使用指令嵌入的想法。

指令

app.directive('navFooter', function() {
  return {
    templateUrl: 'nav.html',
    replace: true,
    transclude: true,
    restrict: 'E'
  }
})

nav.html

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="navbar-inner">
            <footer ng-transclude>
            </footer>
        </div>
    </div>
</nav>

用法

<nav-footer>
  <a class="btn btn-warning actionButton" href="#/">
      <i class="glyphicon glyphicon-trash icon-white"></i>
      Cancel
  </a>
  <a class="btn btn-primary actionButton" data-ng-click="saveSampleForm(sampleForm)" data-ng-disabled="form.$invalid">
      <i class="glyphicon glyphicon-ok icon-white"></i>
      Save
  </a>
  <div class="version">v{{applicationdata.Version}}</div>
</nav-footer>

Demo link。