Avoid repeating html with a directive

Question

I need to start working in a directive.

I have 5 different views where the html is exactly the same, so I need to do the directive in order to minimize my 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>

That is the HTML I am talking about, I should include css classes and everything, is that possible?

Any help is very welcome.

use http://stackoverflow.com/questions/18784520/angular-directive-with-default-options#answer-20708823 as reference — vinayakj, Jun 16 '15 at 15:39

score 2 · Accepted Answer · answered Jun 16 '15 at 15:49

2

You don't need to use a custom directive. If all you want to achieve is to be able to reuse some html you can always put it into another template and use it by ng-include:

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

answered Jun 16 '15 at 15:49

Tomek Sułkowski

7,081
2
17
15

score 1 · Answer 2 · answered Jun 16 '15 at 15:43

Reusing the same HTML file as 5 different views is possible but you will need to place all the value or data that you require to show on all the 5 pages in one and use javascript or jquery to display according. so instead of doing this creating 5 views would be better, it isn't using up any server processing time, only memory and since it's just 5 views i dont think it would affect it so much also. i've also included a link of the Angular project that i was working on below, which had aorund 2-3 views so incase you require as to go about that, with ng-route etc. GitHub link for AngularJS Project

Hope this helps

Avoid repeating html with a directive

2 Answers2