binding custom events in angularjs using directives

Question

I am trying to create a directive by wrapping jquery autocomplete plugin somthing like this

<input class="form-control" auto-complete ui-items="list" modvar="selectedSvr" callback="myfunction"/>

I want to call whichever function I pass to callback attribute, how can i achieve this?

here's my directive

app.directive('autoComplete', function() {
    return function($scope, iElement, iAttrs) {
        iElement.autocomplete({
            source: $scope[iAttrs.uiItems],
            select: function (event,ui) {
                $scope.$apply(function () {
                    $scope[iAttrs.modvar] = ui.item.value;
                    // maybe register/call myfunction here
                })
            }
        });
    };
});

Mmm... take a look to isolated scope and & binding, check this link http://stackoverflow.com/questions/24640284/angular-directive-callback and on the other hand, autocomplete / type ahead like, why not using angular-ui one? (https://angular-ui.github.io/bootstrap/#/typeahead) — Braulio, Aug 27 '15 at 14:45
Thanks @Braulio for your answer. I checked that link in your answer but i can't use that solution since it suggests using isolated scope, which creates problem, then it can not access other attributes like ui-items etc. — Yogesh, Aug 27 '15 at 15:46

score 2 · Accepted Answer · edited May 23 '17 at 10:29

I found solution here.

Now code looks like

HTML

<input class="form-control" auto-complete ui-items="searchList" modvar="selectedItem" on-callback="callme()"/>

Angular

app.directive('autoComplete', function() {
    return function ($scope, iElement, iAttrs) {
        iElement.autocomplete({
            source: $scope[iAttrs.uiItems],
            select: function (event,ui) {
                $scope.$apply(function () {
                    $scope[iAttrs.modvar] = ui.item.value;
                    $scope.$eval(iAttrs.onCallback);
                })
            }
        });
    };
});

binding custom events in angularjs using directives

1 Answers1