2

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 Answer 1

4

$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

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

1 Comment

This is gold. You've just solved a problem I've been wrestling with for 3 months. A timeout block is mandatory if you're loading foundation with angularjs, especially so if you want your transitions to run smoothly! 300ms is the absolute minimum.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.