I know Customizing out of the box typeahead directive is not a good idea,
so went ahead and created another directive called `type-ahead-custom` for
my customization.
Here is the code.
<div ng-app="exampleApp">
<form class="form-horizontal" ng-controller="myCtrl" >
<div class="form-group">
<div>
<label for="account" class="col-sm-2 col-md-2 control-label
customize-label ">Typeahead</label>
<div class="col-sm-8">
<div class="inner-addon right-addon">
<input type="text" ng-model="selectedOptions.planes"
uib-typeahead="plane as plane.formatted_address for plane in data"
type-ahead-custom="maps" typeahead-loading="loadingdata"
typeahead-no-results="noResults" class="form-control ng-valid ng-dirty
ng-valid-parse ng-touched" aria-autocomplete="list" aria-expanded="false"
aria-owns="typeahead-4-8758" />
</div>
</div>
</div>
</div>
</form>
</div>
for example in above code `type-ahead-custom="maps"`is my directive, here i
supply the table name to get data from (here for example sake i am just
passing a string).
here's js
var exampleApp = angular.module('exampleApp', ['ui.bootstrap']);
exampleApp.directive('typeAheadCustom', function($http) {
return {
priority: 1,
link: function($scope, $element, $attributes) {
$scope.data = [];
$scope.$watch($attributes.ngModel, function(newValue, oldValue)
{
$http.get('//maps.googleapis.com/'+$attributes.typeAheadCustom+'/api/geocode/json',
{
params: {
address: newValue,
sensor: false
}
}).success(function(data) {
$scope.data = data.results;
});
});
}
}
});
Since the DOM has both directive `type-ahead-custom` and `uib-typeahead`, i
have given my directive `priority:1` to make it executes first.
Problem: with my directive in place, typeahead seems to lag one $http
request behind while showing the data on UI.
For example, if you start by typing.
s = no results displayed on ui, even though we got back data from server.
so = Now you see the results of previous query results i.e 's', even though
we got back data for 'so'
sou = Now you see the results of previous query results i.e 'so', even
though we got back data for 'sou'
this continues.
I am not sure why this is happening or how to fix this. Any pointers will
be helpful.
here's plunker https://plnkr.co/edit/PmYRm37Uqn6CFYAXuUcl
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
