我是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属性是未定义的。
如果有人能帮助我,我将不胜感激。 欢呼声。
答案 0 :(得分:0)
你应该写
<div total-for-one-entry ts-entry="tsEntry"></div>
而不是
<div total-for-one-entry tsEntry="tsEntry"></div>