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.

回答1:

$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

来源：https://stackoverflow.com/questions/19623078/initializing-zurb-foundations-tooltip-with-angularjs