1

I have to bind js event on a element after it have been shown by changing a $scope variable using ng-show.

After I change the scope I run JS script but the Js is fastest than angular that he miss found some div not shown yet by ng-show.

Here is a plunker for some code sample to this problem. The solution I found for this kind of problem is to do the JS code in a setTimeout but I need a clean solution : https://plnkr.co/edit/iYDs552yCyd3R7ivgD84?p=preview

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

  setTimeout(function(){  
    jsFunc();
  },1000);
}
georgeawg
  • 48,608
  • 13
  • 72
  • 95
SWahi
  • 96
  • 1
  • 9
  • you will need to add a watch on the scope variable: https://www.sitepoint.com/mastering-watch-angularjs/ – Ankit Khedekar Dec 28 '16 at 10:57
  • As you can see in plunker I just edit it like you said but didn't resolve the problem, the watch function is called a little earlier than the changes in the dom made by angularjs – SWahi Dec 28 '16 at 11:10

1 Answers1

1

Use the $timeout service:

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

The $timeout service is integrated with the AngularJS digest cycle.

Since the Leaflet API is external to the AngularJS framework, a $timeout is necessary for the browser to render the DOM and execute the Leaflet API code.

For more information, see AngularJS $timeout Service API Reference.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • Another alternative is to use a directive such as [Angular-UI ui-leaflet](https://github.com/angular-ui/ui-leaflet). – georgeawg Dec 28 '16 at 18:06
  • Yeah I've tried it before but it is very limited specially for some specific needs. – SWahi Dec 31 '16 at 10:05