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 ディレクティブの作成を使用できます。このプランクを見る

両方の todo アイテムに対して 1 つのテンプレートを作成し、ng-show / hide を使用して表示する要素を選択するか、ケースごとに 2 つの異なるディレクティブを作成することができます。

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 に答える