javascript - 避免使用指令重复 html

Question

我需要开始按照指令工作。

我有 5 个不同的 View ，其中 html 完全相同，因此我需要执行该指令以最小化我的 HTML。

 <div class="list betslip-item">
      <div class="item betslip-header"
           ng-class="slip.active == '1' ? 'betslip-header-active' : 'betslip-header-inactive'">
        <div class="row">
          <div class="col slip-name" ng-click="openMoreInfoSlip(slip)">
            {{:: slip.teamName}}
          </div>
          <div class="col-30">
            <a class="button-size select-button"
               ng-click="swapLineSelection(slip)">
              <i class="fa" ng-class="slip.active == '1' ? 'fa-check-circle' : 'fa-plus-circle'"></i>
            </a>
            <a class="button-size close-button"
               ng-click="removeSlip(slip)"><i class="fa fa-times"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="item item-input" ng-class="(slip.lines.length > 1) ? 'item-select' : ''">
        <div class="input-label">
          {{:: slip.nss}} - {{::slip.gameDate}}
        </div>
        <span class="pick-label"
              ng-init="currentLine = getCurrentLine(slip)"
              ng-if="slip.lines.length < 2">{{:: currentLine.pick}}</span>
        <select
          ng-if="slip.lines.length > 1"
          ng-init="currentLine = getCurrentLine(slip)"
          ng-model="currentLine"
          ng-options="line as line.pick for line in slip.lines"
          ng-change="updateSelectionLine(slip, currentLine.pointsBought)">
        </select>
      </div>
    </div>

这就是我正在谈论的 HTML，我应该包含 css 类和所有内容，这可能吗？

非常欢迎任何帮助。

Answer 1

您不需要使用自定义指令。如果您想要实现的只是能够重用某些 html，您可以随时将其放入另一个模板中并通过 ng-include 使用它:

<ng-include src="'/templates/reusableComponent.html'"></ng-include>