AngularUI Bootstrap Typeahead "capture" update action

Question

How can I capture the "updater" event from the AngularUI UI Bootstrap directive?

I defined my HTML:

<input type="text" pattern="[0-9]*" class="span6" placeholder="8675309" ng-model="empid" typeahead="entry for entry in httpEmpIdSearch($viewValue, 8)"> 

... and my related function:

 $scope.httpEmpIdSearch = function(query, limit) { return $http.get( '/visitorLog/api/v1/employee/?limit=' + limit + '&empid__startswith=' + query ).then(function(response) { output = []; angular.forEach(response.data.objects, function(value, key) { this.push(value.bems.toString()); }, output); return output; }); } 

I would like to take additional steps (autocomplete form) when the user clicks on the ID in the pop-up window. If raw Bootstrap I would use "updater":

 $('#sampleElement').typeahead({ minLength: 3, source: function (query, process) { // get the data }, updater: function (item) { // user clicked on an item, do something more! }, }); 

I tried different listeners like:

 $scope.$on('typeahead-updated', function(event) { ... } 

But I can not afford to capture such an event. Is there a way that I can perform additional actions after selecting the typeahead option?

Answer 1

There doesn't seem to be a way to connect to this event in the directive. However, you could set the clock to a model value and simulate this behavior.

See this example plunker

Since you are pulling a list of data from the server on the fly, this solution may not work for you. But I would definitely look at the watch, it seems to be the best way to achieve the desired result.

Something like these lines might work.

 $scope.output = []; $scope.httpEmpIdSearch = function(query, limit) { return $http.get( '/visitorLog/api/v1/employee/?limit=' + limit + '&empid__startswith=' + query ).then(function(response) { $scope.output.length = 0; angular.forEach(response.data.objects, function(value, key) { this.push(value.bems.toString()); }, $scope.output); return $scope.output; }); } $scope.$watch('empid', function(newValue, oldValue){ if(newValue !== oldValue && $scope.output.indexOf(newValue) !== -1){ //do work here } }); 

Answer 2

In addition, version 0.4.0 of the ui-bootstrap library now supports the typeahead-on-select directive. This should provide the desired event.

See: https://github.com/angular-ui/bootstrap/commit/91ac17c9ed691a99647b66b3f464e3585398be19

Answer 3

A complete list of typeahead related directives is here:

https://github.com/angular-ui/bootstrap/tree/master/src/typeahead/docs

typeahead-editable, typeahead-input-formatter, typeahead-load, typeahead-min-length, typeahead-on-select, typeahead-template-url, typeahead-wait-ms