CODEWITHSUNDEEP
javascriptangularjs
Jule Wolf
Jule Wolf

Reputation: 221

ng-Click not firing even tho it's in the same scope

I searched through the forum but I didnt find an answer to this question. I want to set the value of my input field to the geolocated Address after button click but the ng-Click="locate()" is not firing. Here is my HTML:

<script id="templates/search.html" type="text/ng-template">
    <ion-view view-title="Datenerfassung">
      <ion-content class="padding" ng-controller="DataCtrl">
        <div class="list">

          <!-- Adressen Input Feld -->
           <label class="item item-input item-floating-label">
             <span class="input-label">Startpunkt in Adressform</span>
             <input id="address" type="text" placeholder="Startpunkt in Adressform">
             <button id="curr_loc" class="button button-balanced" ng-Click="locate()">this-one-doesnt-fire</button>
           </label>

           <!-- Zeit Input Feld -->
           <label class="item item-input item-floating-label">
             <span class="input-label">Zeit in Minuten</span>
             <input id="time" type="number" placeholder="Zeit in Minuten">
           </label>
        </div>
        <!-- Fortbewegungsmittel Toggle Liste -->
        <div class="item item-divider">
          Mit welchem Fortbewegungsmittel </br>
          möchten Sie die Umgebung erkunden?
        </div>

        <ion-radio ng-model="$parent.move" value="walk">Zu Fuß</ion-radio>
        <ion-radio ng-model="$parent.move" value="transit">Tram</ion-radio>
        <ion-radio ng-model="$parent.move" value="car">Auto</ion-radio>
        <ion-radio ng-model="$parent.move" value="bike">Fahrrad</ion-radio>

        <!-- Button zum loslegen -->
        <button id="erkunden" ui-sref="map" class="button button-balanced" ng-Click="setData()">Erkunden</button>
      </ion-content>
      <ion-tabs class="tabs-balanced tabs-icon-top">
    <ion-tab ui-sref="home" title="Home" icon="ion-home"></ion-tab>
    <ion-tab ui-sref="faq" title="FAQ" icon="ion-help-circled"></ion-tab>
    <ion-tab ui-sref="about" title="About" icon="ion-information-circled"></ion-tab>
    <ion-tab ui-sref="impressum" title="Impressum" icon="ion-clipboard"></ion-tab>
  </ion-tabs>
    </ion-view>
 </script>

And my contoller looks like this:

mapApp.controller("DataCtrl", function($scope, dataService) {
  $scope.setData = function() {
    var address = document.getElementById("address").value;
    var time = document.getElementById("time").value;
    var move = $scope.move;
    dataService.setData(address,time,move);
  };

  $scope.locate = function() {
    console.log("asd");
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            console.log(pos);
            document.getElementById("address").value = pos[0] + "," + pos[1];
        });
    }
  };
});

Like I said, clicking on the button is not triggering the locate() function. Otherwise, clicking on the "Erkunden" button triggers the scope.setData() function even tho both buttons are defined similar.

Pretty sure that it is some stupid error I can not see in my tunnel vision but I just cant solve that issue.

Thanks for your help in advance, best regards jule

Upvotes: 2

Views: 201

Answers (2)

Auwal MS
Auwal MS

Reputation: 76

Your code will work perfectly if you take the button outside the scope of the label. 

<label class="item item-input item-floating-label">
  <span class="input-label">Startpunkt in Adressform</span>
  <input id="address" type="text" placeholder="Startpunkt in Adressform">
</label>
<button id="curr_loc" class="button button-balanced" ng-click="locate()">this-one-doesnt-fire</button>

Upvotes: 2

MoMo
MoMo

Reputation: 1876

Your AngularJS directive is misspelled as 'ng-Click'. Correct spelling is 'ng-click'

Upvotes: 0

Related Questions