Question

我正在尝试在angular.js应用中找到初始化wow.js的合适位置。我尝试将它放在控制器代码之前（外部），但它不起作用。

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

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

'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

目前我使用$ rootScope和$ routeChangeStart，你可以使用$ routeChangeSuccess。

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效果）。

Answer 4

对我来说，工作解决方案是在控制器内初始化它，但是在加载整个DOM之后，为了在滚动时触发动画而不是在页面加载时：

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

在Angular.js中初始化WOW.js

4 个答案: