1

我现在正在做一个项目，我们有几个不同的Tasks，每个Task都有自己的数据显示方式，它们是不需要单独控制器和视图的微小数据更改。

例如，一个任务可能有一个显示 的标题，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>

所以通过重复元素有相当多的浪费，但是我觉得拆分整个模板而不是ng-if为每条信息设置大量条件更具可读性。

有没有更好的方法来处理这些模板？

4

1 回答 1

1

您可以使用创建 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>

您可以阅读有关自定义指令的更多信息，在此处输入链接描述

于 2013-11-01T19:10:08.747 回答