$(document).ready() is not working sometimes in AngularJS app

Question

I have a directive which has a templateUrl. In the directive, there is a $scope variable initialized as

$scope.mapLoaded = false;

and a method

$scope.onMapLoaded = function(){
    $scope.mapLoaded = true;
    $scope.$apply();
};

In the $scope.init() function, I am checking that, if the map is loaded, the call a method initAutocomplete() (This method initialize the google address API)

        $scope.init = function()
        {
            console.log('init() is called ' + ' at '+ Date.now());
            if($scope.applicationId === undefined || $scope.applicationId == '') return false;
            $scope.getAssetLocations($scope.loadAssetLocations);
            $scope.getAccountId($scope.loadAccountId);
            if($scope.mapLoaded === true){
                console.log('[$scope.init] >Map loaded is '+ $scope.mapLoaded + ' at '+ Date.now());
                $timeout( function(){
                    $scope.initAutocomplete();
                    }, 4000 );
           }
        };

I am also watching the $scope.mapLoaded variable

           $scope.$watch('mapLoaded', function () {
            console.log('[$watch(mapLoaded)] >Map loaded is '+ $scope.mapLoaded + ' at '+ Date.now());
            if($scope.mapLoaded === true){
                 $timeout( function(){
                     $scope.initAutocomplete();
                     }, 4000 );
            }
         });

And in the view part, I am checking via jQuery that, if the document is ready, then load the google map.

<html>
..some html here
</html>
<script>
    $(document).ready(function () {
        console.log('loadGoogleMap is called from ApplicationAsset at '+ Date.now() + ' after the document is ready');
        window.setTimeout(loadGoogleMap, 1000);

    });

    function loadGoogleMap(){
        if (window.google && document.getElementById('AppAssetLocation')) {
            angular.element(document.getElementById('AppAssetLocation')).scope().onMapLoaded(); 
            console.log('loadGoogleMap called from ApplicationAsset at '+ Date.now());
        }
        else {
            window.setTimeout(loadGoogleMap, 1000);
            console.log('Again, loadGoogleMap is trying to call from ApplicationAsset at '+ Date.now());
        }
    }

</script>

But, what happens here, sometimes it calls window.setTimeout(loadGoogleMap, 1000); inside $(document).ready and sometimes it is not calling. And it is completely random.

What's the problem here folks?

What is not calling? The setTimeout? Or loadGoogleMap within the timeout? You also have a potential endless loop there — StudioTime
– StudioTime, Commented Oct 4, 2018 at 7:50
Sometimes it is not printing the console.log() message. How an infinite loop can occur there? — Noor A Shuvo
– Noor A Shuvo, Commented Oct 4, 2018 at 8:12
In loadGoogleMap, if the first if is never satisfied it will go to else, which then restarts the function and will do the same again and again and... — StudioTime
– StudioTime, Commented Oct 4, 2018 at 11:55

Noor A Shuvo · Accepted Answer · 2018-10-09 09:02:30Z

0

I use

angular.element(document).ready(function () {// Code here});

instead of

$(document).ready(function () { // Code here });

and that solved my problem.

answered Oct 9, 2018 at 9:02

Noor A Shuvo

2,8853 gold badges28 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

$(document).ready() is not working sometimes in AngularJS app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related