Exécution de l'API Leaflet après modification d'une variable $ scope sur angulaire

Question

Je dois lier l'événement js sur un élément après l'avoir affiché en changeant une variable $ scope à l'aide de ng-show.

Après avoir changé la portée je lance le script JS mais le Js est plus rapide qu'angulaire qu'il a manqué de trouver un div pas encore montré par ng-show.

Voici un plunker pour un échantillon de code à ce problème. La solution que je trouve pour ce genre de problème est de faire le code JS dans un setTimeout mais je besoin d'une solution propre: https://plnkr.co/edit/iYDs552yCyd3R7ivgD84?p=preview

$scope.start = function(){ 
    $scope.showMap=true; 

    setTimeout(function(){ 
    jsFunc(); 
    },1000); 
} 

Answer 1

Utilisez le service $timeout:

$scope.start = function(){ 
    $scope.showMap=true; 
    /* 
    setTimeout(function(){ 
    jsFunc(); 
    },1000); 
    */ 
    //Use $timeout 
    $timeout(jsFunc); 
} 

Le service $timeout est intégré avec le cycle de digestion AngularJS. Comme l'API Leaflet est externe à l'infrastructure AngularJS, un timeout $ est nécessaire pour que le navigateur affiche le DOM et exécute le code de l'API Leaflet.

Pour plus d'informations, voir AngularJS $timeout Service API Reference.