I'm trying to find the right place to initialize wow.js within an angular.js app. I tried putting it before (outside) of controller code, but it doesn't work.

Putting the init code inside of a view's controller like below works, but causes the UI to flicker as the init must be getting fired multiple times when a view loads.

csvApp.controller('ResumeCtrl', function ($scope) {
    new WOW().init();
});

Where should 'new WOW().init();' go?

( link to wow.js / )

I'm trying to find the right place to initialize wow.js within an angular.js app. I tried putting it before (outside) of controller code, but it doesn't work.

Putting the init code inside of a view's controller like below works, but causes the UI to flicker as the init must be getting fired multiple times when a view loads.

csvApp.controller('ResumeCtrl', function ($scope) {
    new WOW().init();
});

Where should 'new WOW().init();' go?

( link to wow.js http://mynameismatthieu./WOW/ )

• javascript
• angularjs

4 Answers 4

Easy way: you could initialize it in the .config phase of your app.

var app = angular.module('app', [ /* dependencies */])
    .config(function() {
        new WOW().init();
    })

More elaborate way: build a provider around the library and inject it in the config function.

At the moment i use the $rootScope and $routeChangeStart, you could use $routeChangeSuccess i suppose.

app.run(['$rootScope', function ($rootScope) {

       //create a new instance
       new WOW().init();

    $rootScope.$on('$routeChangeStart', function (next, current) {
        //when the view changes sync wow
        new WOW().sync();
    });
}]);

Just initialize it outside the controller. In your code I'm guessing it'll be something like:

<script>
new WOW().init();

csvApp.controller('ResumeCtrl', function ($scope) {
    /* your angularjs code */
});
</script>

Check out this fiddle to see it in action (scroll down for wow.js effect).

For me, the working solution was initialize it inside the controller, but after the entire DOM is loaded, in order to fire the animations when scrolling and not when the page loads:

angular.module('AA')
       .controller('Controller', function() {
            angular.element(document).ready(function() {
               new WOW().init();
            });
       });