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.

Community
  • 1
  • 1
Jürgen Paul
  • 14,299
  • 26
  • 93
  • 133

1 Answers1

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

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • 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. – Ryan.lay Aug 14 '15 at 10:12