Question

我使用窗口onload脚本捕获long和lat并将它们传递给隐藏的输入值。

＆＃13;

$(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;
  }


});

＆＃13;

然后我尝试用角度ng-model捕获那些输入的值，但它似乎不起作用。它是空的，它不知道输入字段是否填充了任何想法如何解决它？

＆＃13;

//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);
    };

＆＃13;

<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>

＆＃13;

当我尝试注册时，输入值不会被捕获并保存，除非我在onload函数执行默认捕获后修改输入值（如果有意义的话）？

Answer 1

为了使用设备的GPS获取坐标，您需要创建一个工厂，该工厂返回使用当前坐标解析的承诺，或者在出现问题时拒绝。

看看这个：

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>

我创建了一个名为factory的{{1}}，它返回一个具有单个属性geo的对象 - 这是一个返回使用坐标解析的promise的函数。

在控制器内部，我正在注入工厂并使用它来使用getLocation来获取位置，并且在承诺中我将保存传递给promise的位置。

我无法在SO的代码段中运行此代码，因此我在此处创建了一个工作示例：https://jsfiddle.net/3Ln19j68/

Answer 2

对jquery并不太熟悉...但我认为问题是你正在修改Angular之外的Angular输入，所以它不知道输入已经改变了。

你应该做的是用$ scope包装非角度代码。$ apply，然后angular将知道输入已经改变。类似的东西：

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

有关$ apply / $ digest循环的详细信息，请参阅https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply。

角度ng模型不能捕获onload输入值

2 个答案: