feat(typeahead): support typeahead-loading bindable expression

Closes #321

Author: pkozlowski-opensource

src/typeahead/test/typeahead.spec.js

@@ -311,6 +311,21 @@ describe('typeahead tests', function () {
         changeInputValueTo(element, 'not in matches');
         expect($scope.result).toEqual(undefined);
       });
+
+      it('should bind loading indicator expression', inject(function ($timeout) {
+
+        $scope.isLoading = false;
+        $scope.loadMatches = function(viewValue) {
+          return $timeout(function() { return [];}, 1000);
+        };
+
+        var element = prepareInputEl("<div><input ng-model='result' typeahead='item for item in loadMatches()' typeahead-loading='isLoading'></div>");
+        changeInputValueTo(element, 'foo');
+
+        expect($scope.isLoading).toBeTruthy();
+        $timeout.flush();
+        expect($scope.isLoading).toBeFalsy();
+      }));
     });
 
     describe('selecting a match', function () {

src/typeahead/typeahead.js

@@ -30,7 +30,7 @@ angular.module('ui.bootstrap.typeahead', [])
 }])
 
   //options - min length
-  .directive('typeahead', ['$compile', '$q', '$document', 'typeaheadParser', function ($compile, $q, $document, typeaheadParser) {
+  .directive('typeahead', ['$compile', '$parse', '$q', '$document', 'typeaheadParser', function ($compile, $parse, $q, $document, typeaheadParser) {
 
   var HOT_KEYS = [9, 13, 27, 38, 40];
 
@@ -49,6 +49,8 @@ angular.module('ui.bootstrap.typeahead', [])
       //should it restrict model values to the ones selected from the popup only?
       var isEditable = originalScope.$eval(attrs.typeaheadEditable) !== false;
 
+      var isLoadingSetter = $parse(attrs.typeaheadLoading).assign || angular.noop;
+
       //create a child scope for the typeahead directive so we are not polluting original scope
       //with typeahead-specific data (matches, query etc.)
       var scope = originalScope.$new();
@@ -64,6 +66,7 @@ angular.module('ui.bootstrap.typeahead', [])
       var getMatchesAsync = function(inputValue) {
 
         var locals = {$viewValue: inputValue};
+        isLoadingSetter(originalScope, true);
         $q.when(parserResult.source(scope, locals)).then(function(matches) {
 
           //it might happen that several async queries were in progress if a user were typing fast
@@ -88,8 +91,12 @@ angular.module('ui.bootstrap.typeahead', [])
             } else {
               resetMatches();
             }
+            isLoadingSetter(originalScope, false);
           }
-        }, resetMatches);
+        }, function(){
+          resetMatches();
+          isLoadingSetter(originalScope, false);
+        });
       };
 
       resetMatches();