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

希望这有帮助

避免使用指令重复html

2 个答案: