两种方式绑定触发 10 digest() 迭代到达
Two way bindings trigger 10 digest() iteration reached
我在 angular 绑定方面遇到了一些问题,而且我对它不是很有经验。我会 post 所有相关的问题都在这里。
这是一些 angularjs 代码片段,触发 10 digest() 循环到达。我发现了一些类似的 posts,原因是在 digest() 中递归执行了更改,但我在我的示例中找不到原因。
这是代码:
<work-timekeepings-day timekeepings="dailyTimekeepingCtrl.timekeepingList | timekeepingDay : dailyTimekeepingCtrl.selectedDay" day="dailyTimekeepingCtrl.selectedDay"></work-timekeepings-day>
组件:
var workTimekeepingsDay = TimekeepingsApp.component('workTimekeepingsDay', {
templateUrl : 'angular/components/work-timekeepings-day.html',
controllerAs: '$workTkDayCtrl',
bindings : {
timekeepings : '=',
day: '='
}
});
HTML 模板:
<div class="row lightgreen-row padding-5 border-rounded" ng-repeat-start="workTk in $workTkDayCtrl.timekeepings">
<div class="col-md-4"> <b> {{ workTk.user.firstName + ' ' + workTk.user.lastName }} </b> </div> </div> ...
过滤函数:
var timekeepingDayFilter = TimekeepingsApp.filter('timekeepingDay', function() {
return function(timekeepings, filterDay) {
var result=[];
angular.forEach(timekeepings, function(timekeeping) {
var timekeepingDay = moment(timekeeping.workDay);
if (timekeepingDay.isSame(filterDay, 'day')) {
result.push(timekeeping);
}
});
return result;
}
});
如果我在 HTML 模板中应用过滤器函数,它不会触发错误,但与 'day' 变量的双向绑定似乎无法正常工作。如果我在另一个组件中更新 'dailyTimekeepingCtrl.selectedDay',以相同的方式绑定,则更改不会反映在 workTimekeepingsDay 组件中。
这是在组件模板中应用的过滤器:
<work-timekeepings-day timekeepings="dailyTimekeepingCtrl.timekeepingList" day="dailyTimekeepingCtrl.selectedDay"></work-timekeepings-day>
<div class="row lightgreen-row padding-5 border-rounded" ng-repeat-start="workTk in $workTkDayCtrl.timekeepings | timekeepingDay : day">
<div class="col-md-4"> <b> {{ workTk.user.firstName + ' ' + workTk.user.lastName }} </b> </div> </div> ..
Q1:为什么不更新基础数组会出现'digest() aborted'错误?如何将过滤后的数组直接传递给 timekeepings 变量中的组件?
Q2:为什么更新了dailyTimekeepingCtrl.selectedDay组件中的day变量没有更新?
我通过使用 lodash memoize 函数使用现金结果解决了这个问题。虽然我宁愿不使用外部库,但为了改变算法,我仍然对此感到满意。
我在 angular 绑定方面遇到了一些问题,而且我对它不是很有经验。我会 post 所有相关的问题都在这里。 这是一些 angularjs 代码片段,触发 10 digest() 循环到达。我发现了一些类似的 posts,原因是在 digest() 中递归执行了更改,但我在我的示例中找不到原因。 这是代码:
<work-timekeepings-day timekeepings="dailyTimekeepingCtrl.timekeepingList | timekeepingDay : dailyTimekeepingCtrl.selectedDay" day="dailyTimekeepingCtrl.selectedDay"></work-timekeepings-day>
组件:
var workTimekeepingsDay = TimekeepingsApp.component('workTimekeepingsDay', {
templateUrl : 'angular/components/work-timekeepings-day.html',
controllerAs: '$workTkDayCtrl',
bindings : {
timekeepings : '=',
day: '='
}
});
HTML 模板:
<div class="row lightgreen-row padding-5 border-rounded" ng-repeat-start="workTk in $workTkDayCtrl.timekeepings">
<div class="col-md-4"> <b> {{ workTk.user.firstName + ' ' + workTk.user.lastName }} </b> </div> </div> ...
过滤函数:
var timekeepingDayFilter = TimekeepingsApp.filter('timekeepingDay', function() {
return function(timekeepings, filterDay) {
var result=[];
angular.forEach(timekeepings, function(timekeeping) {
var timekeepingDay = moment(timekeeping.workDay);
if (timekeepingDay.isSame(filterDay, 'day')) {
result.push(timekeeping);
}
});
return result;
}
});
如果我在 HTML 模板中应用过滤器函数,它不会触发错误,但与 'day' 变量的双向绑定似乎无法正常工作。如果我在另一个组件中更新 'dailyTimekeepingCtrl.selectedDay',以相同的方式绑定,则更改不会反映在 workTimekeepingsDay 组件中。 这是在组件模板中应用的过滤器:
<work-timekeepings-day timekeepings="dailyTimekeepingCtrl.timekeepingList" day="dailyTimekeepingCtrl.selectedDay"></work-timekeepings-day>
<div class="row lightgreen-row padding-5 border-rounded" ng-repeat-start="workTk in $workTkDayCtrl.timekeepings | timekeepingDay : day">
<div class="col-md-4"> <b> {{ workTk.user.firstName + ' ' + workTk.user.lastName }} </b> </div> </div> ..
Q1:为什么不更新基础数组会出现'digest() aborted'错误?如何将过滤后的数组直接传递给 timekeepings 变量中的组件?
Q2:为什么更新了dailyTimekeepingCtrl.selectedDay组件中的day变量没有更新?
我通过使用 lodash memoize 函数使用现金结果解决了这个问题。虽然我宁愿不使用外部库,但为了改变算法,我仍然对此感到满意。