<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom Google Places Autocomplete</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc4/angular-material.css'>
</head>
<body>
<div ng-controller="AppController as controller" ng-app="app" layout="column">
<form ng-submit="controller.submit()">
<md-input-container md-no-float>
<input ng-model="controller.a" googleplace on-changed="controller.b()" aria-label="aa" placeholder=""/>
</md-input-container>
Address: {{ controller. a }}
</form>
{{ controller.changed }}
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js'></script>
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDvivYcq13YuQqAde0UKwtnVflecI-7XEk&libraries=places'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/1kohei1/custom-google-places-autocomplete-NrWxQr */
(function() {
'use strict';
var app = angular.module('app', ['ngMaterial']);
app.controller('AppController', AppController);
function AppController() {
var _this = this;
_this.submit = function() {
console.log('submit');
}
_this.changed = '';
_this.b = function() {
console.log('changed');
_this.changed = 'changed';
}
}
app.directive('googleplace', function() {
return {
require: 'ngModel',
scope: {
onChanged: '&'
},
link: function(scope, element, attrs, model) {
var options = {
types: []
};
// Create autocomplete instance
scope.autocomplete = new google.maps.places.Autocomplete(element[0], options);
google.maps.event.addListener(scope.autocomplete, 'place_changed', function() {
scope.$apply(function() {
model.$setViewValue(element.val());
scope.onChanged();
});
});
element.on('keydown', function(e) {
if (e.which === 13 && model.$viewValue !== element.val()) {
e.preventDefault();
}
});
}
}
});
})();
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Angular Material
v1.1.0-rc2
AngularJS
v1.5.3
Google Font API
Material Design Lite
