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

Javascript 在带有.load url的ajax请求中使用angularjs变量,javascript,jquery,Javascript,Jquery,我主要是一名PHP程序员,处理jquery的能力非常有限 我正在根据最终用户的位置显示横幅广告。我使用AngularJS脚本返回用户的邮政编码: 我使用以下ajax代码根据提供的zip加载正确的横幅广告: <div id="adspaceNetwork_sponsored_bank"></div> <script> $('#adspaceNetwork_sponsored_bank').load("https://ia.lc/~creative/? zip=

我主要是一名PHP程序员,处理jquery的能力非常有限

我正在根据最终用户的位置显示横幅广告。我使用AngularJS脚本返回用户的邮政编码:

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

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

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

$('#adspaceNetwork_赞助商_bank')。加载(“https://ia.lc/~creative/?
zip=02481“;
您可以在此处看到代码演示:

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


这不起作用:
$('#adspaceNetwork_赞助商_bank')。加载('https://ia.lc/~creative/?zip='+zipCode)

我更新了您的代码并转接了
加载
呼叫

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;
    });
}]); 
我已经用angularjs绑定更新了您的JSFIDLE:

这是您更新的控制器:

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

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

在处理承诺时存在多个问题

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

演示:

您好,先生,您能帮我解答这个问题吗