Pass parameters from directive to callback

Question

I'm trying to define a directive sortable which wraps jqueryui's sortable plugin.

The angular code is:

module.directive('sortable', function () {
    return function (scope, element, attrs) {
        var startIndex, endIndex;
        $(element).sortable({
            start:function (event, ui) {
                startIndex = ui.item.index();
            },
            stop:function (event, ui) {
                endIndex = ui.item.index();
                if(attrs.onStop) {
                    scope.$apply(attrs.onStop, startIndex, endIndex);
                }
            }
        }).disableSelection();
    };
});

The html code is:

<div ng-controller="MyCtrl">
    <ol sortable onStop="updateOrders()">
         <li ng-repeat="m in messages">{{m}}</li>
    </ol>
</div>

The code of MyCtrl:

function MyCtrl($scope) {
    $scope.updateOrders = function(startIndex, endIndex) {
        console.log(startIndex + ", " + endIndex);
    }
}

I want to get the startIndex and endIndex in my callback updateOrders and do something with them, but it prints:

undefined, undefined

How to pass these parameters to my callbacks? Is my approach correct?

score 19 · Answer 1 · answered Dec 13 '12 at 08:50

This fiddle shows hot callback from a directive passing parameters. Main trick is to use the scope to pass a function. http://jsfiddle.net/pkriens/Mmunz/7/

var myApp = angular.module('myApp', []).
directive('callback', function() {
    return { 
        scope: { callback: '=' },
        restrict: 'A',
        link: function(scope, element) {
            element.bind('click', function() {
                scope.$apply(scope.callback('Hi from directive '));
            })
        }
    };
})

function MyCtrl($scope) {
    $scope.cb = function(msg) {alert(msg);};
}

Then the html looks like for example:

<button callback='cb'>Callback</button>

it works with binding `'='`, but not with `'&'`. Any ideas why? — leitasat, Nov 17 '15 at 14:59
You've forgotten function params here `
` changet it for `updateOrders(startIndex,endIndex)` and will work — Serginho, Feb 01 '16 at 15:11

score 16 · Accepted Answer · edited Oct 10 '12 at 01:13

16

scope.$apply accepts function or string. In this case using function would be simpler:

  scope.$apply(function(self) {
    self[attrs.onStop](startIndex, endIndex);
  });

Don't forget to change your html code to:

<ol sortable onStop="updateOrders">

(Removed the ())

edited Oct 10 '12 at 01:13

Freewind

193,756
157
432
708

answered Oct 09 '12 at 23:57

Tosh

35,955
11
65
55

`self[attrs.onStop]` is actually a string, not a function. `self[attrs.onStop](startIndex, endIndex);` is not working. – Freewind Oct 10 '12 at 00:58
1

Sorry, I forgot to mention that `on-stop` attribute need to be set as "updateOrders" (remove parens from your html code). self == scope, and you defined `scope['updateOrders']` in your controller code. – Tosh Oct 10 '12 at 01:01
Thanks @toshshimayama you comment "scope.$apply accepts function or string." really helped me understand scope.$apply. This makes understanding the information more bearable: http://docs.angularjs.org/api/ng.$rootScope.Scope – Stewie Aug 08 '13 at 00:52

Edmar Miyake · Answer 3 · 2013-11-14T20:32:22.560

13

Alternative 1

If you don't have an isolate scope for this directive, I would use the $parse service for that:

In the controller:

...
$scope.getPage = function(page) {

   ...some code here...

}

In the view:

<div class="pagination" current="6" total="20" paginate-fn="getData(page)"></div>

In the directive:

if (attr.paginateFn) {
   paginateFn = $parse(attr.paginateFn);
   paginateFn(scope, {page: 5})
}

Alternative 2

Now, if you have an isolate scope, you can pass parameters to it as a named map. If your directive is defined like this:

scope: { paginateFn: '&' },

link: function (scope, el) {
   scope.paginateFn({page: 5});
}

edited Nov 14 '13 at 20:32

answered Nov 13 '13 at 17:10

Edmar Miyake

12,047
3
37
38

The alternative 2 explained on this response is actually the one angular uses itself to implement parameterized callbacks on most event directives – HeberLZ Oct 31 '15 at 04:23

score 0 · Answer 4 · edited Sep 16 '13 at 07:24

taking @Peter Kriens answser a step further you can just check for the name of a on the scope and call it directly.

var myApp = angular.module('myApp', []).
directive('anyOldDirective', function() {
    return { 
        link: function(scope, element) {
            element.bind('click', function() {
                if (scope.wellKnownFunctionName) {
                      scope.wellKnownFunctionName('calling you back!'); 
                } else {
                      console.log("scope does not support the callback method 'wellKnownFunctionName');
                }
            })
        }
    };
})

function MyCtrl($scope) {
    $scope.wellKnownFunctionName= function(a) {console.log(a);};
}

Pass parameters from directive to callback

4 Answers4