Delay directive execution


#1

Is there a way to delay the initialization of a directive?

In my case, I’m loading a map as soon as someone picks a (side)menu item. But the menu then animates to a ‘closed’ position. During this animation, the map starts initializing and my iPhone 4 doesn’t like that. It’s al shaky and non-smooth for a second.

So I want these events to be timed right behind each other. Using a $scope.$watch() I’m already able to execute code as soon as the $ionicSideMenusController is completely closed but the directive initializes asynchronously of course.


#2

Perhaps put the directive in an ng-if and not set it’s watch value true until everything is completed? The ng-if will completely keep the directive out of the DOM.


#3

Have you messed with $timeout at all? You can delay the initialization of a directive this way.

   //Fadebar Directive
.directive('fadeBar', function ($timeout) {
    return {
        restrict: 'E',
        template: '<div class="fade-bar"></div>',
        replace: true,
        link: function ($scope, $element, $attr) {
            // Run in the next scope digest
            $timeout(function () {
                // Watch for changes to the openRatio which is a value between 0 and 1 that says how "open" the side menu is
                $scope.$watch('$ionicSideMenusController.getOpenRatio()', function (ratio) {
                    // Set the transparency of the fade bar
                    $element[0].style.opacity = Math.abs(ratio);
                });
             //This will delay the directives initialization by 500 ms
            }, 500 );
        }
    };
});

Taken from the Fadebar directive, you can say delay this directive by 500 ms, similar to setting a traditional timeout function. You can mess with this a try to time everything to fit your needs.


#4

Thanks @mhartington but in my opinion, timeout based loading is always kind of a hacky solution. You never know everything is ready after your predefined timeout. @Calendee’s solution worked perfectly. Never thought about implementing it though… learning every day :wink:


#5

Thanks… but I revert to timeouts like @mhartington when I need to… Ugly - but works.