I've been searching through AngularJs Documentation and also searching in Google, but I have not found a way in which the code in Jquery could be made in AngularJS.
I thought maybe using $routeProvider it could be done, but I have'nt found any example nor documentation on how to use $routeProvider to make jsonp calls without showing a template or redirecting to some place.
解决方案
It sounds like what you need is a service, akin to what's being done here:
If however you're looking to gain access to functions or properties defined inside of a particular Angular controller (or scope) from jQuery, take a look at the Plnkr and code below.
To be honest, I really wouldn't go down this road if at all possible. It would be better to remove jQuery from your solution altogether and just stick with Angular. Meaning write your Angular API or service and consume it using Angular controllers/directives etc.
In other words, if you're going to use Angular in your application then go "all Angular". Don't try to mix and match with jQuery. It will only slow you down and make your code harder to maintain.
angular.module('myApp', []);
angular.module('myApp')
.controller('ParentCtrl', function ($scope, $http) {
$scope.name = "parent";
$scope.testFunc = function () {
return "Test is working."
};
$scope.twitterUser = "AngularJS";
$scope.tweet;
$scope.profileImage;
$scope.searchTerm;
// Returns latest post on Twitter from AngularJS
$scope.getLatestAngularTwitterPost = function (callbackFunc) {
$scope.searchTerm = $scope.twitterUser;
var url = "http://api.twitter.com/1/users/show.json";
$http.jsonp(url, {
params: {
callback: 'JSON_CALLBACK',
screen_name: $scope.twitterUser
}
})
.success(function(data){
if(callbackFunc){
console.log("Passing twitter results to callback: " + callbackFunc.name);
return callbackFunc(data);
}
$scope.tweet = data.status.text;
$scope.profileImage = data.profile_image_url;
})
.error(function() {
$scope.tweet = "<strong>Error: could not make JSONP request to Twitter.</strong>";
});
};
});
angular.module('myApp')
.controller('ChildCtrl', function ($scope) {
$scope.name = "child";
});
jQuery - script.js
// Ex. of how to call methods and update properties
// in Angular controllers, from jQuery
$(function () {
// Get Angular controller "ParentCtrl".
// Could also use $('#someSpan').scope(); to get "ParentCntl" scope
var $scopeParentCtrl = $('#parent').scope();
// Get Angular controller "ChildCtrl".
var $scopeChildCtrl = $('#child').scope();
// Update the "name" property in Angular controller "ParentCtrl"
$scopeParentCtrl.$apply(function(){
$scopeParentCtrl.name = "Joe";
console.log("Parent name changed to " + $scopeParentCtrl.name);
});
// Update the "name" property in Angular controller "ChildCtrl"
$scopeChildCtrl.$apply(function(){
$scopeChildCtrl.name = "Gavin";
console.log("Child name changed to "+ $scopeChildCtrl.name);
});
// Call the "testFunc" function in Angular conroller "ParentCtrl"
console.log($scopeParentCtrl.testFunc());
// Call the JSONP function in Angular controller "ParentCtrl"
$scopeParentCtrl.getLatestAngularTwitterPost(jsonpCallback);
});
function jsonpCallback(data) {
var $scopeParentCtrl = $('#parent').scope();
$scopeParentCtrl.tweet = data.status.text;
$scopeParentCtrl.profileImage = data.profile_image_url;
}
这篇关于在 AngularJS 中创建一个 JSONP API &使用 jQuery 消费的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
