angularjs - Google マップの autocompleteService を使用した Angular ディレクティブ md-autocomplete

Question

よろしくお願いいたします。

angularを使用してgoogle AutocompleteService APIと対話するためのオートコンプリート検索ボックスのセットアップを取得しようとしています。

現時点では、私の Angular AutocompleteService はうまく機能しており、検索バーに入力された内容に基づいて提案された予測の配列を取得しています。

ここに私のオートコンプリートサービスがあります:

  angular
    .module('LocalKnowledgeApp')
    .service('AutocompleteService', [ function() {

var self = this;
var suggestions = [];



  self.initPredict = function(searchInput) {
    var predict = new google.maps.places.AutocompleteService();
    predict.getQueryPredictions({ input: searchInput }, self.displaySuggestions);
  };

  self.displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      console.log(status);
      return;
    }
    predictions.forEach(function(prediction) {
      suggestions.push(prediction.description);
    });
  };

  self.makeSuggestions = function(){
    return suggestions.slice(0,10);
  };

そのサービスは、オートコンプリートに接続しようとしているフォームを制御するコントローラーに挿入されます。(オートコンプリート ビットに関与し、AutocompleteService と対話する関数のみを含めました)

angular
    .module('LocalKnowledgeApp')
    .controller('RequestController', ['LocationService', 'MarkersService', 'AutocompleteService', '$http', '$scope',
        function(LocationService, MarkersService, AutocompleteService, $http, $scope) {

    var self = this;
    var isInfoOpen = false;
    var clickedRequest = {};
    var requestUser = {};
    var autocompleteStarted;
    self.master = {};
    var autocompleteSuggestions = [];

    // var search = autoCompleteSearch;


    self.autoCompleteSearch = function(searchInput){
        if (searchInput.length < 2) {
        self.autocompleteStarted = false;
      } else {
        AutocompleteService.initPredict(searchInput);
        self.autocompleteStarted = true;
        self.autocompleteSuggestions = AutocompleteService.makeSuggestions();
        return self.autocompleteSuggestions;
      }
    };

現在、検索バーにドロップダウン ボックスを表示するように接続して、Google オートコンプリート サービスが RequestsController に返す一連の提案からユーザーが選択できるようにしようとしています。

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Request a tour from a local</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="location">Location</label>
            <div>
            <md-autocomplete
                md-search-text-change="r.autoCompleteSearch(searchText)"
                md-input-name="request.location"
                md-selected-item="selectedItem"
                md-search-text="searchText"
                md-items="item in r.autocompleteSearch(searchText)"
                md-item-text="item.display"
                md-input-minlength="0">
              <md-item-template md-highlight-text="searchText">
                {{item.display}}
              </md-item-template>
            </div>
            </md-autocomplete>

            <aside ng-show="r.autocompleteStarted" id="autocompleteSuggestions">
              <ul ng-repeat="suggestion in r.autocompleteSuggestions track by $index"> {{suggestion}} </ul>
            <aside>
          </div>

ngMaterial モジュールを挿入し、必要なすべての bower コンポーネントを適切な場所に配置しました。ディレクティブは入力に応答するため、これはわかっていますが、灰色のボックスしか表示されません。

(function() {
  'use strict';

  angular
    .module('LocalKnowledgeApp', ['ngResource', 'ngMaterial']);

}());

これは私のウェブページがどのように見えるかです...

[

どんな助けでも大歓迎です！