Capture "updater" action from AngularUI's Bootstrap Typeahead

Question

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

I've 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 associated 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 action (autocomplete a form) when the user clicks on an ID in the popup. If raw Bootstrap I would use the "updater":

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

I've tried various listeners like:

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

But I've not way to let me capture such an event. Is there some way I can take additional action once a typeahead option is selected?

Answer 1

It does not appear that there is a way to hook into that event in the directive. You could however put a watch on the model value and simulate this behavior.

Check out this plunker example

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

Something along these lines could 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

Also, in version 0.4.0 of the ui-bootstrap library the typeahead-on-select directive is now supported. This should provide your desired event.

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

Answer 3

The full list of typeahead related directives is here:

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

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