双向绑定触发10 digest()迭代到达

时间:2016-08-09 19:34:28

标签: javascript angularjs angular-digest two-way

我在角度绑定方面遇到了一些问题,我对此并不十分熟悉。我会在这里发布所有问题,因为它们是相关的。 这里有一些angularjs代码剪切,触发10个digest()循环到达。我找到了一些类似的帖子,原因是在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,为什么组件中的日变量没有更新?

1 个答案:

答案 0 :(得分:0)

我通过使用lodash memoize函数来解决这个问题来使用现金结果。虽然我宁愿不使用外部库,但要更改算法,我仍然对此感到满意。