AngularJS: Ideal way to handle HTML Templates?

Question

I'm working on a project right now where we have several different Tasks, each Task has it's own way of displaying data, they are minor data changes that don't need individual controllers, and views.

For example, one task might have a heading that shows the Username, the next task doesn't need a username and replaces it with a Behavior.

Here is what I am doing right now:

<div id="event-list"> <ul> <li ng-click="isHidden=!isHidden;" ng-repeat="event in events" ng-init="isHidden=false;"> <!-- Template 1 --> <div ng-if="taskCategory == 'taskExampleOne'"> <div class="heading"> <h1>{{event.EventName}}</h1> <p class="description">Username: {{ event.User.Name }}</p> <p class="date">{{ event.RecordDateUtc | moment: 'MM/DD/YYYY' }}</p> </div> <div ng-show="isHidden" class="body event-show-hide-animation"> <img src="{{ event.SnapshotJpg }}" /> <dl> <dt>Record Date: </dt> <dd>{{ event.RecordDateUtc | moment: 'MM/DD/YYYY HH:MM A' }} {{ event.RecordDateTz }}</dd> </dl> <button type="button" class="btn btn-primary" ng-click="viewEventDetails( event )">View Event</button> </div> </div> <!-- End Template 1 --> <!-- Template 2 --> <div ng-if="taskCategory == 'taskExampleTwo'"> <div class="heading"> <h1>{{event.EventName}}</h1> <p class="description"> <span>Username: {{ event.User.Name }}</span> <span>Behavior: {{ event.BehaviorNames }}</span> </p> <p class="date">{{ event.RecordDateUtc | moment: 'MM/DD/YYYY' }}</p> </div> <div ng-show="isHidden" class="body event-show-hide-animation"> <dl> <dt>Event: </dt> <dd>{{ event.EventId }}</dd> <dt>Group: </dt> <dd>{{ event.QueryKey.GroupIds[0] }}</dd> <dt>Record Date: </dt> <dd>{{ event.RecordDateUtc | moment: 'MM/DD/YYYY HH:MM A' }} {{ event.RecordDateTz }}</dd> </dl> <button type="button" class="btn btn-primary" ng-click="viewEventDetails( event )">View Event</button> </div> </div> <!-- End Template 2 --> </li> </ul> </div>

So there is quite a bit of waste by repeating the elements, however I feel as though it is a bit more readable splitting the entire template rather than having a ton of ng-if conditions for each piece of information.

Is there a better way to handle these templates?

fabmilo · Accepted Answer · 2013-11-01 19:10:08Z

You can use create an angularjs directive. See this Plnkr

You can either Create one template for both todo items and use ng-show / hide to select which elements to present or create two different directives for each case.

myApp.directive("todo", function() { return { restrict: 'A', templateUrl: "task.tpl.html" }; });

Notice the file template todo.tpl.html

 <div class="heading"> <h1>{{event.EventName}}</h1> <p class="description">Username: {{ event.User.Name }}</p> <span ng-show="event.BehaviorNames">Behavior: {{ event.BehaviorNames }}</span> <p class="date">{{ event.RecordDateUtc | moment: 'MM/DD/YYYY' }}</p> </div> <div ng-show="!isHidden" class="body event-show-hide-animation"> <img src="{{ event.SnapshotJpg }}" /> <dl> <dt ng-show="event.BehaviorNames">Event: </dt> <dd ng-show="event.BehaviorNames">{{ event.EventId }}</dd> <dt ng-show="event.BehaviorNames">Group: </dt> <dd ng-show="event.BehaviorNames">{{ event.QueryKey.GroupIds[0] }}</dd> <dt>Record Date: </dt> <dd>{{ event.RecordDateUtc | moment: 'MM/DD/YYYY HH:MM A' }} {{ event.RecordDateTz }}</dd> </dl> <button type="button" class="btn btn-primary" ng-click="viewEventDetails( event )">View Event</button> </div>

You can read more about custom directives enter link description here

Collectives™ on Stack Overflow

AngularJS: Ideal way to handle HTML Templates?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related