AngularJS보기 내에서 Waypoints.js 사용

화면 이동 가능한 AngularJS보기 내에서 Waypoint를 사용하려하지만 작동하지 않습니다. ui.utils jQuery Passthrough를 사용하려고하지만 아무 일도 일어나지 않습니다. 내가보기에 대해 다음과 같은 템플릿을 사용하고AngularJS보기 내에서 Waypoints.js 사용

<body> 
<div id="wrapper"> 

    <div id="nav-menu"> 
     <...> 
    </div> 


    <div id="main" class="main"> 
     <div ng-view></div> 
    </div> 
</div> 
</body>

: 여기에 지금까지 가지고 무엇

<div class="fullScreenImage"></div> 
<div ui-jq="waypoint" ui-options="test">test</div>

내 컨트롤러는 다음과 같이 보입니다 :

app.controller('myController', ['$scope', 
function ($scope) { 
    $scope.test = function(){ 
     alert('You have scrolled to an entry.'); 
}}]);

내 주요을 요소는 스크롤 가능하지만 창은 스크롤 할 수 없습니다. 메인 div로 passthrough를 설정하면 테스트 기능이 트리거되지만, 템플릿 안에 필요합니다. 어떤 제안?

출처

2014-04-15 vkislicins

JSFiddle 또는 plunkr을 제공하면 도움이됩니다.

템플릿이 ngView 안에 있기 때문에 문제가 있다고 생각합니다. 템플릿의 내용이 XHR 통해 ngView 내부에 배치되기 때문에

상기 경유지 링크 http://imakewebthings.com/jquery-waypoints/#doc-refresh

각도 지시 더 효과적 이럴 것에서 논의 된 바와 같이 갱신되어야한다.

출처

2014-07-29 20:38:15 freebug

ng-views에도 중첩 된 중간 지점에 문제가있었습니다.

내 솔루션은 웨이 포인트를 바인딩하기 위해 뷰가로드 될 때까지 대기하는 것입니다.이 경우 $viewContentLoaded을 사용할 수 있습니다.

예.

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

    $rootScope.$on('$viewContentLoaded', function(){ 

     var waypoint = new Waypoint({ 
      element: document.getElementById('waypoint'), 
      handler: function(direction) { 
       console.log('Scrolled to waypoint!') 
      } 
     }) 
    }); 
}]);

출처

2015-09-23 23:34:18 danwild

나는 동일한 문제가있었습니다. 바인딩을 $timeout 예 : $timeout(addWaypoints());으로 지연시킬 수도 있습니다.

출처

2016-05-24 08:18:43 user2715478

AngularJS보기 내에서 Waypoints.js 사용

답변

관련 문제