在Angular.js中初始化WOW.js

Question

我正在尝试找到在angular.js应用程序中初始化wow.js的正确位置。我试着把它放在控制器代码的前面(外部)，但它不起作用。

如下所示，将init代码放在视图的控制器中是可行的，但会导致UI闪烁，因为在加载视图时必须多次触发init。

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

“new WOW().init()；”应该放在哪里呢？

(链接到wow.js http://mynameismatthieu.com/WOW/ )

Answer 1

简单的方法:你可以在你的应用程序的.config阶段初始化它。

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

更复杂的方法:围绕库构建一个provider，并将其注入到config函数中。

Answer 2

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();
    });
}]);

Answer 3

只需在控制器外部初始化它即可。

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

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

查看this fiddle，看看它的实际效果(向下滚动查看wow.js效果)。