Javascript 在带有.load url的ajax请求中使用angularjs变量
我主要是一名PHP程序员,处理jquery的能力非常有限 我正在根据最终用户的位置显示横幅广告。我使用AngularJS脚本返回用户的邮政编码: 我使用以下ajax代码根据提供的zip加载正确的横幅广告: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=
<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);
演示:您好,先生,您能帮我解答这个问题吗