听起来您需要的是一项服务,类似于这里正在做的事情:
从服务器获取数据的推荐方式
http://jsfiddle.net/wpPhY/
但包括$resource
:
http://docs.angularjs.org/api/ngResource.$resource
这是查询 Twitter 的 JSONP 服务的基本示例(取自http://egghead.io):
JSFiddle 演示:http: //jsfiddle.net/gavinfoley/DJ6da/
angular.module('Twitter', ['ngResource']);
angular.module('Twitter')
.controller('TwitterCtrl', ['$scope', '$resource', function ($scope, $resource) {
$scope.twitter = $resource('http://search.twitter.com/:action',
{action:'search.json', q:'angularjs', callback:'JSON_CALLBACK'},
{get:{method:'JSONP'}});
$scope.doSearch = function () {
$scope.twitterResult = $scope.twitter.get({q:$scope.searchTerm});
};
}]);
此外,将 Breeze 与 Angular 结合使用也值得一看。我自己没有使用过它,但你可以用它创建一些非常酷的 CRUD 应用程序:
http://www.breezejs.com/samples/todo-angular
但是,如果您希望从 jQuery 访问在特定 Angular 控制器(或范围)内定义的函数或属性,请查看 Plnkr 和下面的代码。
老实说,如果可能的话,我真的不会走这条路。最好从您的解决方案中完全删除 jQuery 并坚持使用 Angular。这意味着编写您的 Angular API 或服务并使用 Angular 控制器/指令等使用它。
换句话说,如果你打算在你的应用程序中使用 Angular,那么就选择“all Angular”。不要试图与 jQuery 混搭。它只会减慢您的速度并使您的代码更难维护。
完整的 Plnkr 演示: http ://plnkr.co/edit/X5SfKD?p=preview
HTML
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="myApp.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="parent" data-ng-controller="ParentCtrl">
<span id="someSpan">This is {{name}}.</span>
<div id="child" data-ng-controller="ChildCtrl">This is {{name}}.</div>
Get latest tweet for: <input type="text" data-ng-model="twitterUser" />
<button data-ng-click="getLatestAngularTwitterPost()">Get Tweet</button><br/><br/>
Latest {{searchTerm}} Twitter post:
<div>
<img id="twitterProfileImage" data-ng-src="{{profileImage}}" />
<span data-ng-bind-html-unsafe="tweet" id="tweet"></span>
</div>
</div>
</body>
</html>
Angular 应用程序 - myApp.js
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;
}