Angular.js에서 WOW.js를 초기화하십시오.

Question

angular.js 앱에서 wow.js를 초기화 할 적절한 위치를 찾으려고합니다. 컨트롤러 코드 앞에 (외부) 넣으려고했지만 작동하지 않습니다.

다음과 같이 뷰 컨트롤러에 init 코드를 넣는 것은 작동하지만 뷰가로드 될 때 init이 여러 번 실행되어야하므로 UI가 깜박입니다.

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

'새 WOW(). init();' 가기?

Answer 1

그냥 컨트롤러 외부 초기화 (링크는 http://mynameismatthieu.com/WOW/를 wow.js합니다). 밖으로 this fiddle (wow.js 효과를 아래로 스크롤) 행동에 그것을보고

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

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

확인 : 코드에서 나는이 같은 일을 수있을 것 같은데요.

Answer 2

쉬운 방법 : 앱의 .config 단계에서 초기화 할 수 있습니다.

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

더 정교한 방법 : 라이브러리 주위에 provider를 구축하고 config 기능에 주입.

Answer 3

나는 $ 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 4

는 작업 솔루션은 컨트롤러 내부 초기화했지만, 전체 DOM 후 스크롤 할 때 애니메이션을 발사하기 위해,로드하지 않을 경우 페이지가로드됩니다 :

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