angular-component approach

booking-pickup.js

"use strict";

angular.module('MerchantApp').component('bookingPickup', {

    bindings: {
        booking: '=',
        display: '=',
        actions: '='
    }, 

    controller: ['uiGmapGoogleMapApi', function(uiGmapGoogleMapApi) {

        var Ctrl = this;

        var displayModel = {
            companyName : "",
            address: "",
            name: "",
            email: "",
            phone: ""
        };

        var uiactions = {
          companyName : {
              change : function(){
                  console.log(new Date(), "pickup.actions.companyname.change");
              }
          },
          address: {
              change: function(){
                  console.log(new Date(), "pickup.actions.address.change");
              }
          },
          name: {
              change: function(){
                  console.log(new Date(), "pickup.actions.name.change");
              }
          },
          email: {
              change: function(){
                  console.log(new Date(), "pickup.actions.email.change");
              }
          },
          phone: {
              change: function(){
                  console.log(new Date(), "pickup.actions.phone.change");
              }
          }                                    
        };


        var Helpers = {
          activateGoogleMapsAutocomplete: function(){
                uiGmapGoogleMapApi.then(function(maps) {
                    var ps = document.getElementById('pickup-search');
                    var PsearchBox = new maps.places.Autocomplete(ps, {});
                    console.log(PsearchBox);
                });
          }
        };

    	Ctrl.$onInit = function(){
            Ctrl.display.pickup = displayModel;
            Ctrl.actions.pickup = uiactions;
            Helpers.activateGoogleMapsAutocomplete();
    	};

    }], 

    templateUrl: 'views/booking/booking-pickup.html' 

});