在AngularJS視圖中使用Waypoints.js

我想在可滾動的AngularJS視圖中使用Waypoints，但它不工作。我正在嘗試使用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.'); 
}}]);

我主要元素是可滾動的，但窗口不是。設置passthrough到主div會觸發測試功能，但我需要它在模板內。有什麼建議麼？

來源

2014-04-15 vkislicins

提供JSFiddle或plunkr會有幫助。

但我想這個問題是因爲模板在ngView之內。需要

作爲模板的內容被置於通過XHR的ngView內，路點如在鏈接http://imakewebthings.com/jquery-waypoints/#doc-refresh

角指令將更加有效IMHO討論被刷新。

來源

2014-07-29 20:38:15 freebug

我在ng-views中嵌套的路標也有問題。

我的解決方案只是等待視圖加載後綁定航點，因此您可以使用$viewContentLoaded。

E.g.

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

回答

相關問題