在 AngularJS 视图中使用 Waypoints.js答案

【问题标题】：Using Waypoints.js inside an AngularJS view在 AngularJS 视图中使用 Waypoints.js
【发布时间】：2014-04-15 21:16:20
【问题描述】：

我正在尝试在可滚动的 AngularJS 视图中使用航点，但它不起作用。我正在尝试使用 ui.utils jQuery Passthrough，但没有任何反应。到目前为止，这是我所拥有的：

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

我的 main 元素是可滚动的，但窗口不是。将 passthrough 设置到主 div 将触发测试功能，但是我需要在模板中使用它。有什么建议吗？

【问题讨论】：

标签： javascript jquery angularjs jquery-waypoints

【解决方案1】：

提供 JSFiddle 或 plunkr 会有所帮助。

但我想问题是因为模板在 ngView 内。

由于模板的内容通过 XHR 放置在 ngView 内，因此需要刷新路径点，如链接 http://imakewebthings.com/jquery-waypoints/#doc-refresh 中所述

Angular 指令会更有效，恕我直言。

【讨论】：

【解决方案2】：

我也遇到了嵌套在 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!')
            }
        })
    });
}]);

【讨论】：

【解决方案3】：

我遇到了同样的问题。也可以延迟与$timeout 的绑定，例如$timeout(addWaypoints());。

【讨论】：