2016-08-09 2 views
0

Ich habe ein paar Probleme mit eckigen Bindung und ich bin nicht sehr erfahren mit ihm. Ich werde hier alle Fragen posten, wie sie zusammenhängen. Hier ist ein paar angularjs Code, der 10 digest() Zyklus erreicht. Ich habe einige ähnliche Beiträge gefunden und die Ursache ist, dass eine Änderung rekursiv in digest() durchgeführt wird, aber ich kann die Ursache in meinem Beispiel nicht finden. Hier ist Code:Zwei-Wege-Bindungen auslösen 10 Digest() Iteration erreicht

<work-timekeepings-day timekeepings="dailyTimekeepingCtrl.timekeepingList | timekeepingDay : dailyTimekeepingCtrl.selectedDay" day="dailyTimekeepingCtrl.selectedDay"></work-timekeepings-day> 

Komponente:

var workTimekeepingsDay = TimekeepingsApp.component('workTimekeepingsDay', { 
     templateUrl : 'angular/components/work-timekeepings-day.html', 
     controllerAs: '$workTkDayCtrl', 
     bindings : { 
      timekeepings : '=', 
      day: '=' 
     } 
}); 

HTML-Vorlage:

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

Filterfunktion:

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

});

Wenn ich Filterfunktion in HTML-Vorlage anwenden, löst es den Fehler nicht aus, aber die bidirektionale Bindung mit Variable 'Tag' scheint nicht ordnungsgemäß zu funktionieren. Wenn ich "dailyTimekeepingCtrl.selectedDay" in einer anderen Komponente auf dieselbe Weise aktualisieren, wird die Änderung nicht in der Komponente "workTimekeepingsDay" wiedergegeben. Hier wird der Filter in der Komponente Vorlage angewendet:

<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: Warum ist die ‚verdauen() abgebrochen‘ Fehler auftreten, wenn ich nicht die Basis-Array zu aktualisieren bin? Wie kann ich das gefilterte Array in der Variablen timekeepings direkt an die Komponente übergeben?

Q2: Warum wird die Tagesvariable in der Komponente nicht aktualisiert, wenn dailyTimekeepingCtrl.selectedDay aktualisiert wird?

Antwort

0

Ich löste dies, indem ich lodash Memoize-Funktion verwende, um Ergebnis aus Bargeld zu verwenden. Obwohl ich es vorgezogen hätte, keine externe Bibliothek zu verwenden, sondern den Algorithmus zu ändern, bin ich immer noch zufrieden damit.

Verwandte Themen