角度 ng-model 无法捕获加载输入值

Posted 2023-02-23

【中文标题】角度 ng-model 无法捕获加载输入值

【英文标题】：angular ng-model can't capture an onload input value

【发布时间】：2017-04-30 20:30:27

【问题描述】：

我正在使用窗口加载脚本来捕获经纬度并将它们传递给隐藏的输入值。

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


);

然后我尝试使用 angular ng-model 捕获这些输入的值，但它似乎不起作用。就像它是空的，它不知道输入字段已填充任何想法如何解决它？

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

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

【问题讨论】：

在这个问题中没有关于angularjs的东西，angular部分在哪里？

我使用 ng-model 捕获输入字段的部分？ :) 应该写这部分以使其更清晰猜对了

请edit您的问题并将其添加到那里，没有伤害:)

好的，谢谢

【参考方案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>

我创建了一个名为 geo 的 factory，它返回一个具有单个属性 getLocation 的对象——这是一个返回用坐标解析的承诺的函数。

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

我无法在 SO 的 sn-p 中运行此代码，所以我在这里创建了一个工作示例：https://jsfiddle.net/3Ln19j68/

【讨论】：

有趣的 Alon，您如何将这些数据传递到您的服务器到现有的 mongo 架构？

@ben 我不知道，对 mongo 一无所知，你也没有在你的问题中问过这个问题。如果您自己无法管理，我建议您提出一个新问题（但基本上您需要$http）

embed.plnkr.co/eNxt5cmPraP4rzc3bxNg 这就是我想要做的，从 onload 窗口获取 long/lat，然后将它从工厂传递给我的控制器并保存，但我在 ng-bind 表达式中遇到了困难以及如何将其保存在控制器中，我不知所措

@ben 基本上，在controlergeoservice.js 上，您需要将longitude: $scope.user.Geoposition.coordinates.longitude, 更改为longitude: $scope.coordinates ? $scope.coordinates.longitude : null,，与latitude 相同

【参考方案2】：

对 jquery 不太熟悉...但我认为问题在于您正在修改 Angular 之外的 Angular 输入，因此它不知道输入已更改。

你应该做的是用 $scope.$apply 包裹你的非 Angular 代码，然后 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。