2016-05-03 19 views
0

私はAngularを初めて習得しました。私は、Angularで物事の順番を理解することで多くの問題を抱えています。ループが完了した後にng-repeat内のカスタムディレクティブが実行されるのはなぜですか?

現在、私の問題は、ng-repeat内のすべてのオブジェクトに対してディレクティブ(total-for-one-entry)を実行したいということです。私は、次のビューを持っている:

timesheetsModule.directive('totalForOneEntry', ['Calculator', function (Calculator) { 


    var getDuration = function (tsEntry) { 
     var duration; 

      if (tsEntry.type == "Shift") { 
       duration = Calculator.getTsOrJournalOrTaShiftOrLeaveHours(tsEntry.tsStart.tsStartTime,tsEntry.tsEnd.tsEndTime,tsEntry.tsBreak.tsBreakDur); 
       tsEntry.tsShiftHours = duration; 

      } else { 
       duration = Calculator.getTsOrJournalOrTaShiftOrLeaveHours(tsEntry.tsStart.tsStartTime, tsEntry.tsEnd.tsEndTime, 0); 
       tsEntry.tsLeaveHours = duration; 
      } 


      if (tsEntry.tsStart.journal) { 
       if (tsEntry.tsStart.journal.type == "Shift") { 
        duration = Calculator 
         .getTsOrJournalOrTaShiftOrLeaveHours(tsEntry.tsStart.tsJournalStartTime, 
          tsEntry.tsEnd.tsJournalEndTime, 
          tsEntry.tsBreak.tsJournalBreakTime); 

        tsEntry.journalShiftHours = duration; 
       } else { 
        duration = Calculator 
         .getTsOrJournalOrTaShiftOrLeaveHours(tsEntry.tsStart.tsJournalStartTime, 
          tsEntry.tsEnd.tsJournalEndTime, 
          0); 
        tsEntry.journalLeaveHours = duration; 
       } 


      } 

      if (tsEntry.tsStart.timeAndAttendance) { 
       duration = Calculator.getTsOrJournalOrTaShiftOrLeaveHours(tsEntry.tsStart.tsTaStartTime, tsEntry.tsEnd.tsTaEndTime, tsEntry.tsBreak.tsTaBreakTime); 
       tsEntry.taShiftHours = duration; 
      } 


    }; 

    return { 

     restrict: "A", 
     scope: { tsEntry: "=" }, 
     replace:"true", 
     controller: function ($scope) { 
      console.log($scope.tsEntry); 
      getDuration($scope.tsEntry); 

     }, 
     templateUrl: "Scripts/Timesheet/Templates/totalForOneEntry.html" 

    }; 
}]); 

そして最後に、次は私のテンプレートです:

<tbody ng-repeat="user in weekTimesheet.currentTimeSheet.users"> 
           <tr> 

            <th class="timesheets-employee" rowspan="{{ user.numberOfVisibleDays + user.totalNumberOfEntries + 2 }}"> 
             <strong>{{ user.firstName }}</strong><br> 
             <small> 
              <strong ng-repeat="position in user.positions">{{ user.position }}</strong> 
             </small> 
            </th> 
           </tr> 


          <tr ng-repeat-start="day in user.days" ng-if="day.tsEntries.length !== 0"> 
           <th class="record-date" rowspan="{{ day.tsEntries.length + 1}}"> 
            {{ day.dayName }} {{day.daysDate | amDateFormat:'DD/MM'}} 
           </th> 

          </tr> 


          <tr ng-repeat-start="tsEntry in day.tsEntries" ng-if="day.tsEntries.length !==0"> 
           <td><strong>{{ tsEntry.type }}</strong></td> 
           <td> 
            <div class="record-main"> 
             {{tsEntry.tsStart.tsStartTime}} 
             <input type="text" ng-class="{focused : tsEntry.tsStart.inEditMode, blured: tsEntry.tsStart.inReadMode}" ng-model="tsEntry.tsStart.tsStartTime" ng-model-of-time ng-focus="swapReadAndEditModes(tsEntry)" ng-blur="swapReadAndEditModes(tsEntry)"/> 
            </div> 
            <div class="record-sub"> 
             <span class="record-journal"><i class="icon-interface-clock"></i> {{ tsEntry.tsStart.tsJournalStartTime | amDateFormat: 'HH:MM'}}</span> 
             <span class="record-clock"><i class="icon-interface-stopwatch"></i> {{ tsEntry.tsStart.tsTaStartTime | amDateFormat: 'HH:MM'}}</span> 
            </div> 
           </td> 
           <td> 
            <div class="record-main"> 
             {{tsEntry.tsEnd.tsEndTime}} 
             <input type="text" ng-class="{focused : tsEntry.tsEnd.inEditMode, blured: tsEntry.tsEnd.inReadMode}" ng-model="tsEntry.tsEnd.tsEndTime" ng-model-of-time ng-focus="swapReadAndEditModes(tsEntry)" ng-blur="swapReadAndEditModes(tsEntry)"/> 
            </div> 
            <div class="record-sub"> 
             <span class="record-journal"><i class="icon-interface-clock"></i> {{ tsEntry.tsEnd.tsJournalEndTime | amDateFormat: 'HH:MM'}}</span> 
             <span class="record-clock"><i class="icon-interface-stopwatch"></i> {{ tsEntry.tsEnd.tsTaEndTime | amDateFormat: 'HH:MM'}}</span> 
            </div> 
           </td> 
           <td> 
            <div class="record-main"> 
             {{tsEntry.tsBreak.tsBreakDur}} 
             <input type="number" min="0" max="999" ng-class="{focused : tsEntry.tsBreak.inEditMode, blured: tsEntry.tsBreak.inReadMode}" ng-model-of-time ng-model="tsEntry.tsBreak.tsBreakDur" ng-focus="swapReadAndEditModes(tsEntry)" ng-blur="swapReadAndEditModes(tsEntry)"/>m 
            </div> 
            <div class="record-sub"> 
             <span class="record-journal"><i class="icon-interface-clock"></i> {{ tsEntry.tsBreak.tsJournalBreakTime}}m</span> 
             <span class="record-clock"><i class="icon-interface-stopwatch"></i> {{ tsEntry.tsBreak.tsTaBreakTime }}m</span> 
            </div> 
           </td> 
           <td> 
            <div total-for-one-entry tsEntry="tsEntry"></div> 
           </td> 
           <td> 
            <div total-for-one-entry tsEntry="tsEntry"></div> 
           </td> 
           <td>{{tsEntry.note}}</td> 
           <td> 
            <a class="btn mini green" href="#">Approve</a> 
           </td> 
          </tr> 

          <tr ng-repeat-end ng-hide="true"></tr> 
          <tr ng-repeat-end ng-hide="true"></tr> 

</tbody> 

は、これが私のディレクティブです

<div> 
    <div> 
     <div class="record-main">{{tsEntry.type === "shift" ? tsEntry.tsShiftHours:tsEntry.tsLeaveHours}} hrs</div> 
     <div class="record-sub"> 
      <span class="record-journal"><i class="icon-interface-clock"></i>{{tsEntry.type === "shift" ? tsEntry.journalShiftHours:tsEntry.journalLeaveHours}} hrs</span> 
      <span class="record-clock" ng-if="tsEntry.type == 'Shift'"><i class="icon-interface-stopwatch"></i> {{tsEntry.taShiftHours}} hrs</span> 
     </div> 
    </div> 
</div> 

ここでの問題は、角がすべてを処理し、ということですディレクティブを除いて何らかの理由でng-repeatが終了したらディレクティブを実行することにしましたが、ディレクティブに渡したtsEntry属性は未定義です。

誰かが私に手を差し伸べることができればと思います。 乾杯。

+1

<div total-for-one-entry ts-entry="tsEntry"></div> 

を書くべきですか?ディレクティブにリンキング関数を追加してみてください。 –

+0

ああホー....コンパイル、前置き、いいえ投稿、コントローラなし - どのようにあなたの命令は、動作すると思いますか? – Deadpool

答えて

0

あなたはリンク機能を必要としない代わりに

<div total-for-one-entry tsEntry="tsEntry"></div> 
+0

Uは私を救った!これが問題だとは信じられません。ありがとう:) –

関連する問題