Angular ng-Modell kann keinen Onload-Eingangswert erfassen

Question

Ich verwende ein Fenster-Onload-Skript, um Long und Lat zu erfassen und sie an den versteckten Eingabewert zu übergeben.

$(function() { 
 
    window.onload = getLocation; 
 
    var geo = navigator.geolocation; 
 

 
    function getLocation() { 
 
    if (geo) { 
 
     geo.getCurrentPosition(displayLocation); 
 
    } else { 
 
     alert("Oops, Geolocation API is not supported"); 
 
    } 
 
    } 
 

 
    function displayLocation(position) { 
 
     var lang = position.coords.longitude; 
 
    var lat = position.coords.latitude; 
 
    console.log(lat); 
 
    document.getElementById('txtlat').value = lat; 
 
    document.getElementById('txtlang').value = lang; 
 
    } 
 

 

 
});

Dann versuche ich den Wert dieses Eingangs mit Winkel ng-model zu erfassen, aber es scheint nicht zu funktionieren. Es ist so, als wäre es leer und es weiß nicht, dass Eingabefelder gefüllt sind, irgendwelche Ideen, wie man es beheben kann?

//controller of the register html 
 
$scope.user = {}; 
 

 
$scope.register = function(form) { 
 
     $scope.submitted = true; 
 

 
     if (form.$valid) { 
 
     Auth.createUser({ 
 
      name: $scope.user.name, 
 
      email: $scope.user.email, 
 
      password: $scope.user.password, 
 
      lang: $scope.user.lang, 
 
      lat: $scope.user.lat 
 
     }) 
 
     .then(function() { 
 
      // Account created, redirect to home 
 
      $state.go('main'); 
 
     }) 
 
     .catch(function(err) { 
 
      err = err.data; 
 
      console.log(err); 
 
      $scope.errors = {}; 
 

 
      // Update validity of form fields that match the mongoose errors 
 
      angular.forEach(err.errors, function(error, field) { 
 
      form[field].$setValidity('mongoose', false); 
 
      $scope.errors[field] = error.message; 
 
      }); 
 
     }); 
 
     } else { 
 
     console.log("form not work") 
 
     } 
 
     console.log($scope.user); 
 
    };

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form class="form" name="form" ng-submit="register(form)" novalidate> 
 
    <input type="text" name="txtlang" class="form-control" id="txtlang" ng-model="user.lang"> 
 
    <input type="hidden" name="txtlat" class="form-control" id="txtlat" ng-model="user.lat"> 
 
    <button class="btn btn-inverse btn-lg btn-register" type="submit"> 
 
    Sign up</button> 
 
</form>

Wenn ich versuche, durch die onload-Funktion zu tun zu registrieren, werden Werte Eingang nicht erfasst und gespeichert bekommen, wenn ich den Eingangswert nach der Standard-Capture ändern, wenn das Sinn macht?

Answer 1

Nicht wirklich zu vertraut mit jquery ... aber ich denke das Problem ist, dass Sie einen Angular-Eingang außerhalb von Angular ändern, so dass es keine Ahnung hat, dass sich die Eingabe geändert hat.

Sie sollten Ihren nicht-eckigen Code mit $ scope einpacken. $ Apply, dann winkel wird wissen, dass sich die Eingabe geändert hat. Etwas wie:

$scope.$apply(function() { 
    document.getElementById('txtlat').value = lat; 
    document.getElementById('txtlang').value = lang; 
}); 

Siehe https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply für weitere Informationen über $ apply/$ Zyklus verdauen.

Answer 2

Um die Koordinaten mithilfe des GPS des Geräts zu erhalten, müssen Sie eine Factory erstellen, die eine Zusage zurückgibt, die mit den aktuellen Koordinaten aufgelöst wird, oder ablehnen, falls ein Problem auftritt.

Werfen Sie einen Blick auf diese:

angular.module('app', []).service('geo', ['$q', function($q) { 
 
    return { 
 
    getLocation: function() { 
 
     var deferred = $q.defer(); 
 
     if(!navigator.geolocation) { 
 
     // geolocation is not available, 
 
     // better just reject the promise and return it :(
 

 
     deferred.reject("Oops, Geolocation API is not supported"); 
 
     return deferred.promise; 
 
     } 
 
     
 
     navigator.geolocation.getCurrentPosition(
 
     function (pos) { 
 
      // We have your position! 
 
      deferred.resolve(pos); 
 
     }, 
 
     function (error) { 
 
      // Oh no! We can't get your position 
 
      deferred.reject(error); 
 
     }, { 
 
      // Some setings 
 
      enableHighAccuracy: false, 
 
      timeout: 5000, 
 
      maximumAge: 0 
 
     } 
 
    ); 
 

 
     return deferred.promise 
 
    } 
 
    }; 
 
}]).controller('ctrl', ['$scope', 'geo', function($scope, geo) { 
 
    geo.getLocation().then(
 
    function(pos) { 
 
     $scope.coordinates = pos.coords; 
 
     console.log(pos); 
 
    }, 
 
    function(error) { 
 
     console.log(error); 
 
    } 
 
); 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div> 
 
    <strong>latitude:</strong><span ng-bind="coordinates.latitude"></span> 
 
    </div> 
 
    <div> 
 
    <strong>longitude:</strong><span ng-bind="coordinates.longitude"></span> 
 
    </div> 
 
</div>

Ich habe ein factorygeo genannt, die ein Objekt mit einer einzigen Eigenschaft getLocation zurückkehren - Das ist eine Funktion, die ein Versprechen zurück, die mit lösen die Koordinaten.

Innerhalb der Controller ich Injektion der Fabrik und benutzen, um den Standort zu erhalten mit geo.getLocation() und in dem Versprechen, ich spare den Ort, an dem Versprechen übergeben wurde.

Ich konnte nicht diesen Code in SO der Schnipsel laufen, so habe ich ein funktionierendes Beispiel hier: https://jsfiddle.net/3Ln19j68/