md-autocomplete, дающий ошибку на. Then function

Question

Я не могу использовать директиву angularjs md-autocomplete. Пожалуйста, дайте мне знать, где проблема.

TypeError: Cannot read property 'then' of undefined 
at de (angular-material.min.js:13) 
at he (angular-material.min.js:13) 
at e.B [as focus] (angular-material.min.js:13) 
at fn (eval at compile (angular.min.js:230), <anonymous>:4:415) 
at b (angular.min.js:125) 
at e (angular.min.js:272) 
at b.$eval (angular.min.js:144) 
at b.$apply (angular.min.js:145) 
at HTMLInputElement.<anonymous> (angular.min.js:272) 

Я получаю эту ошибку, когда я открываю мД-автозаполнение

TypeError: Cannot read property 'filter' of undefined 
at DeliveryCtrl.querySearch (DeliveryCtrl.js:81) 
at fn (eval at compile (angular.min.js:230), <anonymous>:4:416) 
at b (angular.min.js:125) 
at n.$eval (angular.min.js:144) 
at de (angular-material.min.js:13) 
at he (angular-material.min.js:13) 
at e.B [as focus] (angular-material.min.js:13) 
at fn (eval at compile (angular.min.js:230), <anonymous>:4:415) 
at b (angular.min.js:125) 
at e (angular.min.js:272) 

вот мой контроллер

(function() { 
'use strict'; 
RLabs.controller('DeliveryCtrl', DeliveryCtrl); 

function DeliveryCtrl($timeout, $q, $log, $http, $scope, resto_info, base_url) { 
    $scope.delivery_areas = []; 
    $scope.fun1 = function() { 
     $scope.fun2().then(function(data) { 
      console.log("after call to fun2"); // execute before fun2 
      var myArray = data; 
      var myString = JSON.stringify(myArray.join(', ')); 
      console.log(myString); 
      console.log(myArray); 
      return myString.split(/, +/g).map(function(state) { 
       return { 
        value: state.toLowerCase(), 
        display: state 
       }; 
      }); 
     }); 
    } 
    $scope.fun2 = function() { 
     var deferred = $q.defer(); 
     $http({ 
      url: base_url.base_url + 'profile-load', 
      method: "POST", 
      data: { 
       "profile_id": resto_info.profile_id, 
       "api_key": resto_info.api_key, 
       "app_version": resto_info.app_version, 
       "request_operation": "get_delivery_area_data" 
      } 
     }).success(function(response) { 
      console.log(response); 
      console.log(response.response.location[0].delivery.areas); 
      $scope.delivery_areas = response.response.location[0].delivery.areas; 
      console.log($scope.delivery_areas); 
      deferred.resolve(response.response.location[0].delivery.areas); 
     }).error(function() { 
      deferred.resolve(null); 
     }); 
     return deferred.promise; 
    } 
    var self = this; 
    self.simulateQuery = false; 
    self.isDisabled = false; 
    self.states = $scope.fun1(); 
    self.querySearch = querySearch; 
    self.selectedItemChange = selectedItemChange; 
    self.searchTextChange = searchTextChange; 
    self.newState = newState; 
    function newState(state) { 
     alert("Sorry! You'll need to create a Constitution for " + state + " first!"); 
    } 
    function querySearch(query) { 
     var results = query ? self.states.filter(createFilterFor(query)) : self.states, 
      deferred; 
     if (self.simulateQuery) { 
      deferred = $q.defer(); 
      $timeout(function() { 
       deferred.resolve(results); 
      }, Math.random() * 1000, false); 
      return deferred.promise; 
     } else { 
      return results; 
     } 
    } 
    function searchTextChange(text) { 
     $log.info('Text changed to ' + text); 
    } 
    function selectedItemChange(item) { 
     $log.info('Item changed to ' + JSON.stringify(item)); 
    }  
    function createFilterFor(query) { 
     var lowercaseQuery = angular.lowercase(query); 
     return function filterFn(state) { 
      return (state.value.indexOf(lowercaseQuery) === 0); 
     }; 
    } 
}})(); 

и вот мой HTML

 <div ng-controller="DeliveryCtrl as ctrl" layout="column" ng-cloak> 
<md-content class="md-padding"> 
    <form ng-submit="$event.preventDefault()"> 
     <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p> 
     <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="0" placeholder="What is your favorite US state?"> 
      <md-item-template> 
       <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span> 
      </md-item-template> 
      <md-not-found> 
       No states matching "{{ctrl.searchText}}" were found. 
       <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a> 
      </md-not-found> 
     </md-autocomplete> 
     <br/> 
     <md-checkbox ng-model="ctrl.simulateQuery">Simulate query for results?</md-checkbox> 
     <md-checkbox ng-model="ctrl.noCache">Disable caching of queries?</md-checkbox> 
     <md-checkbox ng-model="ctrl.isDisabled">Disable the input?</md-checkbox> 
     <p>By default, <code>md-autocomplete</code> will cache results when performing a query. After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p> 
    </form> 
</md-content> 

пожалуйста, предоставьте мне решение, как получить значение MyString в директиве автозаполнения выбрать список

Answer 1

я была такая же проблема, это работает для меня:

function autoComplete(query) { 

    if (!query || query.length < 2) { 
     return vm.complete = []; 
    } 

    // http request 

}