0

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Non
  • 8,409
  • 20
  • 71
  • 123
  • use http://stackoverflow.com/questions/18784520/angular-directive-with-default-options#answer-20708823 as reference – vinayakj Jun 16 '15 at 15:39

2 Answers2

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>
Tomek Sułkowski
  • 7,081
  • 2
  • 17
  • 15
1

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