angular ui sortable callback

Question

Is there a way to set a callback function with angular ui's sortable? I'd like to add ng-update="foo()" to the tbody tag below and have foo run whenever the list changes.

<tbody id="existingStockResults" ui-sortable ng-model="processes">
    <tr ng-repeat="process in processes" ng-class="{odd: $index%2 == 0, even: $index%2 != 0}">
        <td>{{process.process}}</td>
        <td>{{process.vendor}}</td>
        <td>{{process.desc}}</td>
            <td>{{process.cost}}</td>
        <td><a href="#" ng-click="editProcess($index)">edit</a></td>
        <td><a href="#" ng-click="removeProcess($index)">remove</a></td>
    </tr>
</tbody>

thanks!

Answer 1

You can now specify the update function in the ui-sortable attribute, like this:

<tbody ui-sortable="{update: foo()}">

But there still are a few issues with the sortable directive, like in this example. They are currently discussed here.

Answer 2

I prefer to use an options hash with my update callback defined, in my scope like this:

$scope.sortableOptions = {
    disabled: false,
    update: function(event) {
        return $scope.sortableUpdated = true;
    }
};

and in the template:

<div ui-sortable="sortableOptions"> ...

Answer 3

Reading through the ui-sortable file (there isn't a demo of it on the angular-ui homepage, wonder why?) here, I see that it allows for 2 callbacks -> start and update, for before and after the change you trigger. So something like this should work:

<tbody id="existingStockResults" ui-sortable update="myCallback()" ng-model="processes">