可以为 WayPoints 插件使用 AngularUI jQuery PassThrough 吗？答案

【问题标题】：Possible to use AngularUI jQuery PassThrough for the WayPoints plugin?可以为 WayPoints 插件使用 AngularUI jQuery PassThrough 吗？
【发布时间】：2012-07-26 18:55:56
【问题描述】：

我打算尝试为这个 jQuery WayPoints 插件 http://imakewebthings.com/jquery-waypoints/#documentation 编写指令

但后来发现了带有 jQuery Passthrough 的 AngularUI，它声称支持 75% 的 jQuery 插件。 http://angular-ui.github.com/

有人可以写一个例子来说明我如何在我的 AngularJS 应用程序中使用这个 jQuery WayPoints 插件吗？

【问题讨论】：

标签： jquery angularjs jquery-waypoints

【解决方案1】：

Here 是一个使用 AngularUI jQuery Passthrough 和 Waypoints 的小提琴。主要需要注意的是：

1) 包含 angular-ui.js 脚本（这是一个非常棒的 AngularJS 伴侣！）

2) 注册模块时在requires参数中添加['ui']

angular.module('waypoints', ['ui']);

3) 在你的控制器中添加一个你想在航点被命中时调用的函数

function WaypointsController($scope) {
    $scope.test = function(){
        alert('you have scrolled');
    }
}

4) 设置ui-jq 指令，将函数传递给ui-options

<div ui-jq="waypoint" ui-options="test">

【讨论】：

如何在其中添加方向/选项？ ;-)
更新了 chrome 的 fiddle（chrome 拒绝执行脚本 - XSS）here

【解决方案2】：

回答马可的问题：

3) 在你的控制器中添加一个你想在航点被命中时调用的函数

function WaypointsController($scope) {
    $scope.test = function(direction){
        alert('you have scrolled ' + direction);
    };
    $scope.optionsObj = {
        offset: 50
        //additional options
    };
}

4) 设置ui-jq 指令，将函数传递到ui-options

<div ui-jq="waypoint" ui-options="test, optionsObj">

Here 是一个展示这一点的小提琴

【讨论】：