ui-gmap-search-boxを角材に追加する

Question

私は古い角型プロジェクトに角材を入れていますが、1つ問題があります。ui-gmap-search-boxは期待どおりにレンダリングされません。ここで

私のコードです：

<md-input-container class="md-icon-float md-block"> 
    <label>Telefonnummer</label> 
    <md-icon md-font-set="material-icons">phone</md-icon> 
    <input ng-model="controller.user.phoneNumber" type="number" name="phone" ng-minlength="8" required> 
    <div ng-messages="signupForm.phone.$error" role="alert"> 
    <div ng-message="minlength">Bitte vollständigen Telefonnummer angeben.</div> 
    <div ng-message="required">Bitte ein Telefonnummer angeben.</div> 
    </div> 
</md-input-container> 

    <md-input-container class="md-icon-float md-block" id="searchContainer"> 
    <label>Adresse</label> 
    <md-icon md-font-set="material-icons">home</md-icon> 
    </md-input-container> 


<ui-gmap-google-map class="smallMap col-xs-12" center='controller.map.center' zoom='controller.map.zoom'>--> 
    <ui-gmap-search-box parentdiv="'searchContainer'" template="controller.searchbox.template" 
         events="controller.searchbox.events" 
         ng-model="controller.user.address.postalAddress"></ui-gmap-search-box> 
    <ui-gmap-marker coords="controller.marker.coords" options="controller.marker.options" 
        events="controller.marker.events" idkey="controller.marker.id"></ui-gmap-marker> 
</ui-gmap-google-map> 

私はバグがなぜ起こるか私は理解していることを推測する：アドレスのテキストフィールドがAngular MapsとAngular Materialによって追加され、その時点で、行われていますビューのレンダリングで - >テキストフィールドがプレーンテキストフィールドとして表示されます。

質問：

• 私が何かを見逃していましたか？
• Angular Materialをトリガーする方法はありますか？
• Angular Mapsがテキストフィールドを作成したときに呼び出されるイベントはありますか？

Answer 1

このシナリオでは、ui-gmap-search-boxディレクティブを使用して検索ボックスをカスタマイズすることは簡単ではないようです。以下に示すよう代わりに、私はそれを達成することをお勧め：それはほとんどの罰金見ているように、私はCSSでボタンを偽造:)しかし、WOW、あなた：

angular.module("search-box-example", ['uiGmapgoogle-maps', 'ngRoute', 'ngMaterial']) 
 

 
    .config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) { 
 
    GoogleMapApi.configure({ 
 
     //key: '--Place key here--', 
 
     libraries: 'places' 
 
    }); 
 
    }]) 
 

 

 

 
    .controller("SearchBoxController", ['$scope', 'uiGmapLogger', '$http', 'uiGmapGoogleMapApi', 'uiGmapIsReady' 
 
    , function ($scope, $log, $http, GoogleMapApi, uiGmapIsReady) { 
 

 

 

 
     uiGmapIsReady.promise() 
 
     .then(function (instances) { 
 
      var map = instances[0].map; 
 

 
      //init search control 
 
      var searchInput = document.getElementById('pac-input'); 
 
      var searchBox = new google.maps.places.SearchBox(searchInput); 
 
      var searchDiv = document.getElementById('searchContainer'); 
 
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchDiv); 
 
      searchBox.addListener('places_changed', function() { 
 
      var places = searchBox.getPlaces(); 
 
      if (places.length == 0) { 
 
       return; 
 
      } 
 
      $scope.displayPlaces(places); 
 
      }); 
 
     }); 
 

 

 
     $scope.displayPlaces = function (places) { 
 

 
     // Clear out the old markers. 
 
     $scope.map.markers = []; 
 

 
     // For each place, get the icon, name and location. 
 
     var bounds = new google.maps.LatLngBounds(); 
 
     places.forEach(function (place) { 
 
      if (!place.geometry) { 
 
      console.log("Returned place contains no geometry"); 
 
      return; 
 
      } 
 
     
 

 
      // Create a marker for each place. 
 
      $scope.map.markers.push({ 
 
      "id": 1, //place.id, 
 
      "coords": { 
 
       "latitude": place.geometry.location.lat(), 
 
       "longitude": place.geometry.location.lng(), 
 
      }, 
 
      "name": place.name, 
 
      "address": place.formatted_address 
 
      }); 
 

 
      if (place.geometry.viewport) { 
 
      // Only geocodes have viewport. 
 
      bounds.union(place.geometry.viewport); 
 
      } else { 
 
      bounds.extend(place.geometry.location); 
 
      } 
 

 

 

 
     }); 
 

 
     $scope.map.control.getGMap().fitBounds(bounds); 
 
     }; 
 

 

 

 

 
     $scope.map = { 
 
     control: {}, 
 
     center: { 
 
      latitude: 55.755826, 
 
      longitude: 37.6173 
 
     }, 
 
     zoom: 8, 
 
     dragging: false, 
 
     markers: [ 
 
      
 
     ], 
 
     events: {} 
 
     }; 
 

 

 
    }]);

.angular-google-map-container { 
 
      position: absolute; 
 
      top: 0; 
 
      bottom: 0; 
 
      right: 0; 
 
      left: 0; 
 
} 
 

 

 
md-input-container { 
 
    background-color: white; 
 
    
 
} 
 

 
md-input-container.md-icon-left { 
 
    padding-right: 36px !important; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" ; rel="stylesheet"> 
 
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/angular/bower-material/master/angular-material.css"> 
 

 
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.0.1/lodash.js" type="text/javascript"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script> 
 
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script> 
 
    <script src="http://rawgit.com/angular-ui/angular-google-maps/2.3.2/dist/angular-google-maps.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-aria.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-animate.min.js"></script> 
 
    <script type="text/javascript" src="http://rawgit.com/angular/bower-material/master/angular-material.js"></script> 
 
<div ng-app="search-box-example" ng-controller="SearchBoxController"> 
 

 
    <div id="searchContainer"> 
 
     <md-input-container class="md-icon-float md-block"> 
 
      <label>Address</label> 
 
      <md-icon md-font-set="material-icons">home</md-icon> 
 
      <input id="pac-input" placeholder="Address"> 
 
     </md-input-container> 
 
    </div> 
 

 
    <div> 
 
     <ui-gmap-google-map center="map.center" zoom="map.zoom" dragging="map.dragging" events="map.events" options="map.options" 
 
      pan="true" control="map.control"> 
 

 
      <ui-gmap-markers models="map.markers" coords="'coords'" ></ui-gmap-markers> 
 

 
     </ui-gmap-google-map> 
 

 
    </div> 
 

 
</div>