AngularJS：處理HTML模板的理想方法？

我正在從事一個項目，我們有幾個不同的Tasks，每個Task都有它自己的顯示數據的方式，它們是不需要單獨控制器和視圖的小數據更改。AngularJS：處理HTML模板的理想方法？

例如，一個任務可能有一個標題，顯示Username，下一個任務不需要用戶名並將其替換爲Behavior。

下面是我在做什麼現在：

<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>

因此，有相當多的垃圾通過重複的元素，但是我覺得好像它是一個比較可讀分裂整個模板，而不是每條信息都有很多的條件。

有沒有更好的方法來處理這些模板？

來源

2013-11-01 Neil

您可以使用create a angularjs指令。請參閱Plnkr

您可以爲待辦事項創建一個模板，並使用ng-show/hide選擇要呈現的元素或爲每個案例創建兩個不同的指令。

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

通知文件模板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>

你可以閱讀更多有關自定義指令enter link description here

來源

2013-11-01 19:10:08 fabrizioM

AngularJS：處理HTML模板的理想方法？

回答

相關問題