避免使用指令重复 html

Question

我需要开始在指令中工作。

我有 5 个不同的视图，其中 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>

Answer 2

可以将同一个 HTML 文件作为 5 个不同的视图重用，但您需要将需要在所有 5 个页面上显示的所有值或数据放在一个页面中，并使用 javascript 或 jquery 进行显示。所以与其这样做创建 5 个视图会更好，它不会占用任何服务器处理时间，只占用内存，而且由于它只是 5 个视图，我认为它也不会对其产生太大影响。 我还在下面包含了我正在处理的 Angular 项目的链接，该链接有 2-3 个视图，因此如果您需要使用 ng-route 等进行此操作。 GitHub link for AngularJS Project

希望对你有帮助