Todo-Liste dauert 30 Sekunden, um zu erscheinen

Question

Ich benutze Angular 1.5.8. Ich habe eine Komponente in einer Komponente. Die übergeordnete Komponente hat ein div mit ng-show, das entscheidet, wann die untergeordnete Komponente angezeigt werden soll.

Die übergeordnete Komponente ...

function ScheduleController() { 
    var ctrl = this; 
    ctrl.openTodo = function() { 
     ctrl.isTodoVisible = true; 
    } 
} 

angular.module('myApp').component('userTodoDisplay', { 
    template: ` 
    <button click="ctrl.$openTodo()"></button> 
    <div class="my-todo" ng-show="$ctrl.isTodoVisible"> 
     <eb-todo schedule-id="$ctrl.selectedScheduleId" connected-to-project="$ctrl.selectedScheduleConnectedToProject" 
       permissions="$ctrl.User.Role" close-click="$ctrl.closeTooltip()"></eb-todo> 
    </div> 
    `, 
    controller: [UserTodoDisplayController] 
}); 

Die folgende untergeordnete Komponente dauert fast 30 Sekunden zu erscheinen, sobald ich isTodoVisible zu true gesetzt.

Ich habe andere Probleme wie diese auf SO gesehen, aber diese Probleme mit ngAnimate. Ich bin nicht mit ngAnimate.

Ich habe alle meine anderen Komponenten auf die gleiche Weise erstellt, wie ich diese erstellt habe. Ich habe nur Probleme, die Komponente zu erscheinen, jetzt, wo ich ng-show benutze. Warum dauert die ebTodo Komponente ca. 30 Sekunden nach der Einstellung isTodoVisible bis true?

Answer 1

Es gibt verdauungsbewusste Alternativen zu allgemeinen asynchronen Operationen in Angular. Für Click-Ereignisse in Vorlagen ng-click Richtlinie ist bequem:

<button ng-click="$ctrl.openTodo()"> 

für Rückrufe, die asynchron von Orten genannt werden, die nicht bewusst Umfang Digests (Code von Drittanbietern), sollte ein Digest manuell mit Rahmen $apply Verfahren ausgelöst werden :

ctrl.openTodo = function() { 
    $scope.$apply(function() { 
     ctrl.isTodoVisible = true; 
    }); 
} 

Dieser Ansatz kann mit Digest-aware Anrufer (zB ng-click) unvereinbar. Digest-Zyklus wird zweimal ausgelöst und führt zu $rootScope:inprog Action Already In Progress Fehler.

ctrl.openTodo = function() { 
    $scope.$evalAsync(function() { 
     ctrl.isTodoVisible = true; 
    }); 
}