为什么ng-repeat中的自定义指令在循环完成后运行?

时间:2016-05-03 04:31:33

标签: javascript angularjs angularjs-directive

我是Angular的新手,我发现自己在理解Angular中的事物顺序方面有很多问题。

目前我的问题是我想为ng-repeat中的每个对象运行我的指令(total-for-one-entry)。我有以下观点:

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

这是我的指示:

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"

    };
}]);

最后以下是我的模板:

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

这里的问题是,Angular处理除了我的指令之外的所有内容,并且由于某种原因,一旦ng-repeat完成,它决定运行指令但现在我传递给指令的tsEntry属性是未定义的。

如果有人能帮助我,我将不胜感激。 欢呼声。

1 个答案:

答案 0 :(得分:0)

你应该写

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

而不是

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