在带有.load url的ajax请求中使用angularjs变量

Question

我主要是一个PHP程序员，对jquery的处理非常有限。

我正在展示一个基于最终用户位置的横幅广告。我使用一个AngularJS脚本返回用户邮政编码：http://jsfiddle.net/kL50yeek/21/

我使用下面的ajax代码根据提供的zip加载正确的横幅广告：

<div id="adspaceNetwork_sponsored_bank"></div>

<script>
$('#adspaceNetwork_sponsored_bank').load("https://ia.lc/~creative/?
zip=02481");
</script>

您可以在这里看到代码演示：https://jsfiddle.net/cdLw0c48/22/

如何将zipCode Var传递给ajax加载请求？

这不起作用：$('#adspaceNetwork_sponsored_bank').load('https://ia.lc/~creative/?zip='+zipCode);

Answer 1

我已经用angularjs绑定更新了您的jsfiddle 这里：

以下是更新后的控制器：

app.controller('MainCtrl', ['$scope', '$http', '$sce', 'ZipCodeLookupSvc',
    function($scope, $http, $sce, ZipCodeLookupSvc) {
      $scope.zipCode = null;
      $scope.message = 'Finding zip code...';

      ZipCodeLookupSvc.lookup().then(function(zipCode) {
        $scope.zipCode = zipCode;
          $http.get('https://ia.lc/~creative/?zip='+zipCode).success(function(res) {
              $scope.banner = $sce.trustAsHtml(res);
          });

      }, function(err) {
        $scope.message = err;
      });
  }]);

在通过zipCode获得ZipCodeLookupSvc之后，我们使用$http.get调用来获取横幅，并将其设置为$scope.banner，以便在html代码中使用。

Answer 2

我更新了您的代码并传输了load调用。

app.controller('MainCtrl', ['$scope', 'ZipCodeLookupSvc', function($scope, ZipCodeLookupSvc) {
    $scope.zipCode = null;
    $scope.message = 'Finding zip code...';

    ZipCodeLookupSvc.lookup().then(function(zipCode) {
        $scope.zipCode = zipCode;
        $('#adspaceNetwork_sponsored_bank').load('https://ia.lc/~creative/?zip=' + zipCode);
    }, function(err) {
        $scope.message = err;
    });
}]); 

Answer 3

在你的承诺处理中有很多问题。

(function (angular) {
    'use strict';

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

    app.factory('GeolocationSvc', ['$q', '$window', function ($q, $window) {
        return function () {
            var deferred = $q.defer();

            if (!$window.navigator) {
                deferred.reject(new Error('Geolocation is not supported'));
            } else {
                $window.navigator.geolocation.getCurrentPosition(function (position) {
                    deferred.resolve({
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    });
                }, deferred.reject);
            }

            return deferred.promise;
        };
    }]);

    app.factory('ZipCodeLookupSvc', ['$q', '$http', 'GeolocationSvc', function ($q, $http, GeolocationSvc) {
        var MAPS_ENDPOINT = 'https://maps.google.com/maps/api/geocode/json?latlng={POSITION}&sensor=false';

        return {
            urlForLatLng: function (lat, lng) {
                return MAPS_ENDPOINT.replace('{POSITION}', lat + ',' + lng);
            },

            lookupByLatLng: function (lat, lng) {
                var deferred = $q.defer();
                var url = this.urlForLatLng(lat, lng);

                $http.get(url).success(function (response) {
                    // hacky
                    var zipCode;
                    angular.forEach(response.results, function (result) {
                        if (result.types[0] === 'postal_code') {
                            zipCode = result.address_components[0].short_name;
                        }
                    });
                    deferred.resolve(zipCode);
                }).error(deferred.reject.bind(deferred));

                return deferred.promise;
            },

            lookup: function () {
                var deferred = $q.defer();
                var self = this;

                GeolocationSvc().then(function (position) {
                    self.lookupByLatLng(position.lat, position.lng).then(function (zipCode) {
                        console.log('p')
                        deferred.resolve(zipCode);
                    }, deferred.reject.bind(deferred))
                }, deferred.reject.bind(deferred));

                return deferred.promise;
            }
        };
    }]);

    app.controller('MainCtrl', ['$scope', 'ZipCodeLookupSvc', function ($scope, ZipCodeLookupSvc) {
        $scope.zipCode = null;
        $scope.message = 'Finding zip code...';

        ZipCodeLookupSvc.lookup().then(function (zipCode) {
            $scope.zipCode = zipCode;
            console.log(zipCode)
            $('#adspaceNetwork_sponsored_bank').load('https://ia.lc/~creative/?zip=' + $scope.zipCode);
        }, function (err) {
            $scope.message = err;
        });
    }]);

})(angular);

演示：小提琴