Possible to use AngularUI jQuery PassThrough for the WayPoints plugin?

Question

I was going to try and write a directive for this jQuery WayPoints plugin http://imakewebthings.com/jquery-waypoints/#documentation

But then discovered AngularUI with jQuery Passthrough which claims to support 75% of jQuery plugins. http://angular-ui.github.com/

Can someone please write an example of how I could use this jQuery WayPoints plugin in my AngularJS app?

Answer 1

Here is a fiddle that appears to work using the AngularUI jQuery Passthrough with Waypoints. The main things to note are:

1) Include the angular-ui.js script (which is a pretty awesome AngularJS companion!)

2) Add ['ui'] in the requires parameter when registering the module

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

3) Add a function in your controller that you want to call when the waypoint is hit

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

4) Set up the ui-jq directive passing the function into the ui-options

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

Answer 2

To answer Marco's question:

3) Add a function in your controller that you want to call when the waypoint is hit

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

4) Set up the ui-jq directive passing the function into the ui-options

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

Here is a fiddle showing this in action