uiSelect should expose OPEN and other events

[ttonyh]

uiSelect should expose open and other events that select2 has: opening, change, close, highlight, selecting, removing, removed, loaded, focus, and blur. I understand several are already available but it would be nice to have them all accessible through a single format, e.g. broadcast/on or via attr/observe.

[syzer]

+1, btw ng-blur works

[jasedwards]

+1. I have a form with a bunch of these and I don't want the data to be fetched for them until the person clicks on one. the opening event is the only way I can see to do this unless somebody knows of a different way.

[ttonyh]

I've found a pretty complex workaround using decorators:

Set up a decorator that extends uiSelect directive with a 'compile' function, passing uiSelect's existing 'link' function to the 'post' link. Then a watcher, to watch some internal properties such as $select.open & $select.focus.

    module.config( function( $provide ) {
        $provide.decorator( "uiSelectDirective", function( $delegate ) {
            var directive = $delegate[ 0 ];

            directive.compile = function compile( tElement, tAttrs ) {
                return {
                    pre: function preLink( scope, iElement, iAttrs, controller ) {
                        scope.$watchGroup( [ "$select.open", "$select.focus" ], function( val ) {
                            scope.$parent.$broadcast( "uiSelect:events", val );
                        });
                    },
                    post: directive.link
                }
            };

            return $delegate;
        });
    });

Finally, add a listener and pick out the event type sent:

    scope.$on( "uiSelect:events", function( e, events ) {
        var open = events[ 0 ],
            focus = events[ 1 ];

        if ( open ) {
            // Do something...
        }
    });

Hope this helps until the events are added into uiSelect.

( Tested on Angular v1.3.1 & uiSelect v0.8.3 )

[jasedwards]

always forget about delegates. thanks for this.

[syzer]

👍
thanks!

[oslo10e]

@syzer are you sure that ng-blur works ?
I did not succeed to use it, see http://jsfiddle.net/opeaucelle/ca8n37g7/

[syzer]

$select.search is what i was looking for

[syzer]

@oslo10e if u read ttonyh answer again u will get it.

[jossemarGT]

Just correct me if I am wrong, there's no out-of-the-box ng-blur support and the best approach is @ttonyh elegant snippet, isn't it?

[syzer]

@jossemarGT true

[oslo10e]

@jossemarGT I have implemented a good work around with using jQuery events
see http://jsfiddle.net/opeaucelle/o4njwsgk/

[jossemarGT]

@oslo10e thanks I'll try it, at this moment I've tried with @ttonyh 's approach watching $select.focus and the second value that it provides. But it's getting my nerve 😠