Angular JS $ http请求？

Question

我正在尝试使用angular js发出$http请求，以从Google Maps获取json对象。

$http.get('http://maps.googleapis.com/maps/api/geocode/json?address=' + data[ 'street' ] + ',' + data[ 'city' ] + ',Deutschland' + '&sensor=true').success(function(mapData) {
                        angular.extend($scope, mapData);
    });

我读到我需要先“注入” $http ，但是我无法理解它是如何工作的？ 我试图做这样的事情：

angular.module('wmw', [])
.run(['$scope', '$http', function($scope, $http){
    function getTargetCords(data, $scope, $http) {
        var city = data[ 'city' ];
        return $http.get('http://maps.googleapis.com/maps/api/geocode/json?address=' + data[ 'street' ] + ',' + data[ 'city' ] + ',Deutschland' + '&sensor=true').success(function(mapData) {
                    angular.extend($scope, mapData);
        });
    }
}]);

但是在这种情况下，当我试图在此之外使用它时，它说的是“未定义getTargetCords”。 我尝试了多种不同的解决方案，但始终无法解决这个问题。

编辑：我认为为什么我需要此功能的原因可能很令人困惑，所以这是我的其他代码：

var onSuccess = function(position) {
    currentLat = position.coords.latitude ;
    currentLng = position.coords.longitude;
    var thecoords = [];
    $('#filter-list').empty();
    for(i = 0; i<locations.length;i++){
            thecoords = getTargetCords(locations[i]);
            var distance = calculateDistance(currentLat, currentLng, thecoords[0], thecoords[1]);
            addItemToList(locations[i], distance);
    }   
};

// onError Callback receives a PositionError object
function onError(error) {
    alert('Aktueller Standort konnte nicht berechnet werden');
}

navigator.geolocation.getCurrentPosition(onSuccess, onError);

我们有不同的位置，我需要每个位置的距离。

请注意：由于我还没有完全完成角度部分，因此“ thecoords [0]”，“ thecoods [1]”现在显然是错误的值

Answer 1

更新2

http://pastebin.com/WUuYFAnX

当我们希望从旧版应用程序中调用AngularJS代码时，可以将AngularJS代码看作是存在于旧版应用程序中受保护容器中的小型应用程序。 您不能直接对其进行呼叫，但是可以进行远程呼叫。

您可以使用Controller所在的HTML元素的ID。 （不推荐），但是您可以执行以下操作：

HTML更改，我们需要ng-controller和ng-app

<html ng-app="wmw">
<body ng-controller="MainCtrl" id="MainCtrlId">
   ...
</body>
</html>

Angular代码和本机JS

var app = angular.module('wmw', []);

    app.controller('MainCtrl', function ($scope, $http) {

               $scope.getTargetCords = function (data) {

               $http.get(data).success(function (response) {
                    var responseData = JSON.parse(response);
                    console.log(responseData);
               });
            };
    });



function getCords() {
    var city = activeDest['city'];
    var destUrl = 'http://maps.googleapis.com/maps/api/geocode/xml?address=' + activeDest['street'] + ',' + activeDest['city'] + ',Deutschland' + '&sensor=true';

    var MyAngularScope = angular.element($("#MainCtrlId")).scope();
    //Now call your angular method.
    MyAngularScope.getTargetCords(destUrl);
}

有关此技术的更多详细信息，请参见此JSFiddle示例。

强烈建议您重做应用程序以使其在Angular生态系统中工作，而不要执行上述操作。

这是一个简单的角度设置，将Angular Controllers分离到它们的JS文件中，并像使用其他任何JS文件一样将它们导入HTML 。

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

    //Inside your controller you can define your "scope functions".
    $scope.getTargetCords= function(){

          $http.get('urlToGet').success(function(response) {
               var responseData = JSON.parse(response);
               console.log(responseData); 
          });

    };
});

现在，在您的HTML中，您可以具有以下内容：

<div ng-app="wmw">
  <div ng-controller="YourCtrlName">
      <button ng-click="getTargetCords()">GET DATA</button>
  </div>
</div>

您收到了：

未定义getTargetCords

因为您试图从Angular应用程序外部访问Angular控制器方法。

Angular JS $ http请求？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-11 15:34:32

Angular JS $ http请求？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-11 15:34:32

解决方案1
1 已采纳 2015-03-11 15:34:32