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 stackoverflow.com/questions/24640284/angular-directive-callback and on the other hand, autocomplete / type ahead like, why not using angular-ui one? (angular-ui.github.io/bootstrap/#/typeahead) — Braulio
– Braulio, Commented Aug 27, 2015 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
– Yogesh, Commented Aug 27, 2015 at 15:46

Community · Accepted Answer · 2017-05-23 10:29:40Z

2

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);
                })
            }
        });
    };
});

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Aug 27, 2015 at 15:53

Yogesh

1,5952 gold badges20 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

binding custom events in angularjs using directives

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related