CODEWITHSUNDEEP
javascriptjqueryangularjszurb-foundation
Jürgen Paul
Jürgen Paul

Reputation: 15017

Initializing zurb foundation's tooltip with angularjs

I've made $(document).foundation() fire on viewContentLoaded but for some reason it still does not run:

var myApp = angular.module("myApp", []).run(function($rootScope) {
    $rootScope.$on('$viewContentLoaded', function () {
        console.log('loaded!');
        $(document).foundation();
    });
});

See the demo here: http://jsfiddle.net/UpwvU/

I've followed several answers from this question but none of them made me succeed.

Upvotes: 2

Views: 1826

Answers (1)

charlietfl
charlietfl

Reputation: 171669

$viewContentLoaded sounds like a simple event.... but unfortunately it doesn't mean all of the DOM elements have been rendered. Unfortunately the way angular does many digest cycles it's nearly impossible for it to definitvely say ALL DONE

To prove this try following:

.run(function($rootScope, $timeout) {
     $rootScope.$on('$viewContentLoaded', function () {
            console.log('loaded!');
            console.log($('.has-tip').length,'  Num tips');// likely zero as ng-repeat hasn't completed

            $timeout(function(){        

             console.log($('.has-tip').length,'  Num tips after timeout');  // 5 
            },300)
        });
});

Put your foundation code in $timeout block and see if that helps. As for duration to wait.... not sure what best suggestion is

DEMO with $timeout

Upvotes: 4

Related Questions