AngularJS: is not a function TypeError

Question

I am trying to use jQuery Geocomplete with my AngularJS application.

I have this in my html page.

    <input id="destination-location-input" type="text" class="form-control"
     ng-model="destCtrl.destination" ng-change="destCtrl.locationChanged()" 
     data-geocomplete="street address" required/>

and added this code in controller.

var myElement = angular.element( document.querySelector('#destination-location-input'));    

myElement.geocomplete(
    {
      appendToParent: true,
      onChange: function(name, result) {
         var location = result.geometry.location;
      },
      onNoResult: function(name) {
         console.log("Could not find a result for " + name)
      }
    });

When run my app, I am getting this error.

TypeError: myElement.geocomplete is not a function

What could be the issue?

Gauravbhai Daxini · Accepted Answer · 2018-03-15 07:34:46Z

1

Make sure you include the Google Maps API with the Places Library before loading this plugin as described here

<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="jquery.geocomplete.js"></script>

edited Mar 15, 2018 at 7:34

Gauravbhai Daxini

2,2002 gold badges26 silver badges29 bronze badges

answered Mar 15, 2018 at 7:14

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bishan Over a year ago

Those are included

Sandeep · Accepted Answer · 2018-03-15 06:30:42Z

0

Use this;

var myElement = angular.element( document.querySelector('#destination-location-input'))[0];    

myElement.geocomplete(
{
  appendToParent: true,
  onChange: function(name, result) {
     var location = result.geometry.location;
  },
  onNoResult: function(name) {
     console.log("Could not find a result for " + name)
  }
});

answered Mar 15, 2018 at 6:30

Sandeep

1,4791 gold badge13 silver badges27 bronze badges

4 Comments

Sandeep Over a year ago

are you use JQuery?

Bishan Over a year ago

yeah. I am using JQuery

Sandeep Over a year ago

So Why you not write code like :

$('#destination-location-input').geocomplete( {   appendToParent: true,   onChange: function(name, result) {      var location = result.geometry.location;   },   onNoResult: function(name) {      console.log("Could not find a result for " + name)   } });

Bishan Over a year ago

Yeah. this works. but I am trying to use Angular way to obtain an element.

Collectives™ on Stack Overflow

AngularJS: is not a function TypeError

2 Answers 2

1 Comment

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Related