材料設計自動完成不能在遠程調用

Question

更新下拉我試圖讓md-autocomplete發揮好與Algolia's Angular service。我堅持讓下拉列表顯示從Algolia返回的結果。內容在控制檯中，但下拉菜單不會填充更新後的結果。我錯過了什麼？

TL; DR：Plnkr

「後端」

.controller('DemoCtrl', DemoCtrl); 
function DemoCtrl ($timeout, $q, $log, algolia, $http, $scope) { 

    var self = this; 
    self.simulateQuery = false; 
    self.isDisabled = false; 
    self.repos   = loadAll(); 
    self.querySearch = querySearch; 
    self.selectedItemChange = selectedItemChange; 
    self.searchTextChange = searchTextChange; 

    // Algolia demo keys below 
    var client = algolia.Client('latency', '6be0576ff61c053d5f9a3225e2a90f76'); 
    var index = client.initIndex('contacts'); 
    $scope.query = ''; 
    $scope.hits = []; 

    // Disable cache 
    $scope.noCacheResults = false; 


    // ****************************** 
    // Internal methods 
    // ****************************** 
    /** 
    * Search for repos... use $timeout to simulate 
    * remote dataservice call. 
    */ 
    function querySearch (query) { 

     // This returns objects in console 
     var results = self.algoliaSearch(query); 

     // This returns: TypeError: Cannot read property 'then' of undefined 
     // var results = query ? self.algoliaSearch(createFilterFor(query)) : self.repos, deferred; 

     return results; 
    } 
    function searchTextChange(text) { 
    $log.info('Text changed to ' + text); 
    } 
    function selectedItemChange(item) { 
    $log.info('Item changed to ' + JSON.stringify(item)); 
    } 

    /** 
    * Build `components` list of key/value pairs 
    */ 
    function algoliaSearch(text) { 
     try { 
      index 
       .search(text) 
       .then(function(content) { 
        // if (content.query !== $scope.query) { 
        //  // do not take out-dated answers into account 
        //  return; 
        // } 
        $scope.hits = content.hits; 

        return content.hits.map(function (hit) { 
         hit.value = hit.name.toLowerCase(); 
         $log.debug(hit); 
         return hit; 
        }); 

       }, function(content) { 
        console.log('Error: ' + content.message); 
       }); 
     } catch(e) { 
      $log.debug(e); 
     } 
    } 

    function loadAll() { 
    var repos = [ 
     { 
     'name'  : 'Angular 1', 
     'url'  : 'https://github.com/angular/angular.js', 
     'watchers' : '3,623', 
     'forks'  : '16,175', 
     } 
    ]; 
    return repos.map(function (repo) { 
     repo.value = repo.name.toLowerCase(); 
     return repo; 
    }); 

    } 

    /** 
    * Create filter function for a query string 
    */ 
    function createFilterFor(query) { 
    var lowercaseQuery = angular.lowercase(query); 
    return function filterFn(item) { 
     return (item.value.indexOf(lowercaseQuery) === 0); 
    }; 
    } 
} 

「前端」

<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak> 
    <md-content layout-padding layout="column"> 
    <form ng-submit="$event.preventDefault()"> 
     <p>Use <code>&lt;md-autocomplete&gt;</code> with custom templates to show styled autocomplete results.</p> 
     <md-autocomplete 
      ng-disabled="ctrl.isDisabled" 

      md-no-cache="ctrl.noCacheResults" 

      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.name" 
      md-min-length="0" 
      placeholder="Pick an Angular repository" 
      md-menu-class="autocomplete-custom-template"> 
     <md-item-template> 
      {{item}} 

      <span class="item-title"> 
      <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon> 
      <span> {{item.name}} </span> 
      </span> 
      <span class="item-metadata"> 
      <span class="item-metastat"> 
       <strong>{{item.watchers}}</strong> watchers 
      </span> 
      <span class="item-metastat"> 
       <strong>{{item.forks}}</strong> forks 
      </span> 
      </span> 
     </md-item-template> 
     </md-autocomplete> 
    </form> 
    </md-content> 
</div> 

「Algolia默認」

<section class="panel"> 
    <header class="panel-heading"> 
    <div class="search_box"> 
     <form action="#" method="get"> 
     <input autocomplete="off" class="autocomplete" placeholder="Start typing" type="text" spellcheck="false" id="q" ng-model="query" /> 
     <div class="searchbutton"> 
      <i class="icon-search icon-large"></i> 
     </div> 
     </form> 
    </div> 
    </header> 
</section> 

<h1>Results</h1> 
<div class="hit" ng-repeat="hit in hits"> 
    <div class="attribute" ng-repeat="(attribute,v) in hit._highlightResult"> 
    <span>{{ attribute }}: </span> 
    <span ng-bind-html="v.value"></span> 
    </div> 
</div> 

<script type="text/javascript"> 
    angular 
    .module('myapp', ['algoliasearch', 'ngSanitize']) 
    .controller('SearchCtrl', ['$scope', 'algolia', function($scope, algolia) { 
     $scope.query = ''; 
     $scope.hits = []; 
     // Replace the following values by your ApplicationID and ApiKey. 
     var client = algolia.Client('latency', '6be0576ff61c053d5f9a3225e2a90f76'); 
     // Replace the following value by the name of the index you want to query. 
     var index = client.initIndex('contacts'); 
     $scope.$watch('query', function() { 
     index.search($scope.query, { hitsPerPage: 5 }).then(function(content) { 
      if (content.query !== $scope.query) { 
      // do not take out-dated answers into account 
      return; 
      } 
      $scope.hits = content.hits; 
     }, function(content) { 
      console.log('Error: ' + content.message); 
     }); 
     }); 
    }]); 
</script> 

Answer 1

您應該返回一個Promise因爲調用AlgoliaSearch是異步的：

function querySearch(query) { 
    return algoliaSearch(query); 
    // var results = query ? self.algoliaSearch(createFilterFor(query)) : self.repos, deferred; 
} 

你可以在這裏找到更新的代碼：http://plnkr.co/edit/C8fmsNRzNsXEC7InNM6a