如何將動態變量從javascript分配給angularJS范圍

Question

我有一個表單，用戶單擊google map，然后在文本框中顯示緯度和經度。

function addMarker(location) {
  document.getElementById('hLat').value = location.lat().toPrecision(8);
  document.getElementById('hLong').value = location.lng().toPrecision(8);  
}

文本框定義為

<input type="text"  id = "hLat" name = "hLat" ng-model="form.latitude"/>
<input type="text"  id = "hLong" name = "hLong" ng-model="form.longitude"/>

以上述方式，$ scope.formDetails.latitude在控制器中未定義，並收到404錯誤。 盡管緯度和經度值顯示在文本框中。

如果我這樣做

 document.getElementById('hLat').value = "25.6";
 document.getElementById('hLong').value = "45.6";  

輸出為25.6，函數成功執行。

我的控制器定義如下：

var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {

    $scope.formData = {
        epic: "default"

    };

    $scope.formDetails = {

        latitude: "default",
        longitude: "default"

    };


    $scope.save = function() {
        formData = $scope.form;
    };

        $scope.submitDetails = function() {
        console.log("posting data....");
        $scope.formDetails = $scope.form;
        document.write($scope.formDetails.latitude); // strange behaviour
        $http({method:'GET', url:'http://localhost/nametestjson.php', params:{search_type:"details", latitude:$scope.formDetails.latitude, longitude:$scope.formDetails.longitude, page_no:"1", results_per_page:"15"}}).success(function(data){        
            $scope.friends = data.response.docs;        
            var str = JSON.stringify(data, undefined, 2);       
            alert("success");
        }).error(function(data, status, headers, config) {

            alert(status);
            });           
    };

});

Answer 1

我每天都遇到同樣的問題

function addMarker(location) {
  document.getElementById('hLat').value = location.lat().toPrecision(8);
  document.getElementById('hLong').value = location.lng().toPrecision(8);  
}

當前您正在使用angularjs，那么為什么您要編寫純javascipt編碼？ 請嘗試這個

function addMarker(location) {
      $scope.form.latitude= location.lat().toPrecision(8);
      $scope.form.longitude= location.lng().toPrecision(8);  
      $scope.$apply();
    }