CODEWITHSUNDEEP
angularjsangular-directiveangular-ui-select
joe
joe

Reputation: 321

listening to on-select event of angularj ui select

I am creating an custom attribute which will send angular ui select data to the server. However, in my custom directive I need to bind to on-select event to achieve this.

Here is my html code for the directive:

 <div class="component">
        <ui-select send-data ng-model="country.selected" theme="select2" ng-disabled="disabled" style="width: 300px;">
            <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices repeat="country in countries | filter: $select.search">
                <span ng-bind-html="country.name | html"></span>
                <small ng-bind-html="country.code | html"></small>
            </ui-select-choices>
        </ui-select>
    </div>

Notice that the directive is using an custom directive send-data. And here is my directive:

var app = angular.module('app');
app.directive('sendData', [
        '$compile', '$timeout', '$http', function ($compile, $timeout, $http) {
            return {
                require: 'ngModel',
                link: function (scope, el, attrs, ctrl) {                         
                    el.on('on-select', function () {
                        console.log("changed");
                    });                 
                }
            };
        }
]);

The console.log("changed"); statement is not firing in the above directive. why is this, have i got it wrong?

I am aware that I can bind to the on-select event from the controller. But I would like to achieve this in a custom attribute.

Upvotes: 1

Views: 1702

Answers (1)

Tasnim Reza
Tasnim Reza

Reputation: 6060

You can't, on-select is not an event (like click, keydown) so you can bind a listener, The way ui-select implement it they just bind a controller or parent level function.

So it is better to let ui-select handle the on-select method.

If you have any DOM manipulation in on-select then in your sendData directive you have to find the proper li element and set on click event.

Upvotes: 1

Related Questions