Angularjs资源服务示例
我已经在angularjs服务和资源上挣扎了一段时间，但无法得到我所缺少的东西 下面是我的一个例子： 代码如下详细信息 此小提琴尝试加载2012-20132013-2014期间。。。从web资源中，填写选择项 小提琴不起作用，我希望$scope.perriodeJson由periodes服务填充。http get请求运行，但我只得到一个空对象，并且没有得到我期望的任何更新。 Thanx指出了代码中的错误，并提出了增强建议Angularjs资源服务示例,angularjs,service,resources,Angularjs,Service,Resources,我已经在angularjs服务和资源上挣扎了一段时间，但无法得到我所缺少的东西 下面是我的一个例子： 代码如下详细信息 此小提琴尝试加载2012-20132013-2014期间。。。从web资源中，填写选择项 小提琴不起作用，我希望$scope.perriodeJson由periodes服务填充。http get请求运行，但我只得到一个空对象，并且没有得到我期望的任何更新。 Thanx指出了代码中的错误，并提出了增强建议 <div ng-app='mod_periodes'>
<div ng-app='mod_periodes'>
<div id="appChoixPeriode" ng-controller='CtrlChoixPeriode'>
test:{{test}}<hr>
json periodes:{{periodeJson}}<hr>
Select periode:
<select ng-model="periodeSelect" ng-options="item.name for item in periodeSelectModel" ng-change="changePeriodeUtilisee()"></select>
<button type='button' ng-click='resetDefaultPeriode()'>G</button>
</div><!--appChoixPeriode-->
</div>
angular.module('mod_periodes', ['ngResource']);
angular.module('mod_periodes').factory('periodes', function($resource) {
var res = $resource('http://emm.menard.free.fr/test/fakereq.html');
/*content returned:
{"status":"success",
"data":{
"periodes":[
{"id_periode":"1","name":"2012-2013","ts_debut":"2012-07-01 00:00:00","ts_fin":"2013-06-30 23:59:59"},
{id_periode":"2","name":"2013-2014","ts_debut":"2013-07-01 00:00:00","ts_fin":"2014-06-30 23:59:59"},
{"id_periode":"3","name":"2014-2015","ts_debut":"2014-07-01 00:00:00","ts_fin":"2015-06-30 23:59:59"}
],
"id_periode":"2",
"temps_periode_utilisee":"present"},
"messages":[]}
*/
return res;
});
angular.module('mod_periodes').controller('CtrlChoixPeriode',implCtrlChoixPeriode);
function implCtrlChoixPeriode($scope, $resource, periodes) {
$scope.test="angular works";
$scope.periodeJson=periodes.get(); //why dont I get anything in $scope.periodeJson??
//the http request runs and looks successful
//below this, what I intended to do once I retrieve data
/* $scope.periodeJson=periodes.get(function() {
$scope.periodeSelectModel=$scope.periodeJson.data.periodes;
$scope.periodeSelect=$scope.periodeSelectModel[1];
});*/
// $scope.periodeSelectModel=$scope.periodeJson.data.periodes;
// $scope.periodeSelect=$scope.periodeSelectModel[1];
}
正如ranru所指出的，我的问题来自跨域问题 以下是我在本地运行的示例：
<html>
<head>
<title>example</title>
<meta charset='utf-8'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-resource.min.js"></script>
<script>
angular.module('mod_periodes', ['ngResource']);
angular.module('mod_periodes').factory('periodes', function($resource) {
////////// here the url domain must be the same as the one hosting this page
//var res = $resource('http://myserv/fakereq.html');
/////////////////////////////
/*content returned:
{"status":"success",
"data":{
"periodes":[
{"id_periode":"1","name":"2012-2013","ts_debut":"2012-07-01 00:00:00","ts_fin":"2013-06-30 23:59:59"},
{id_periode":"2","name":"2013-2014","ts_debut":"2013-07-01 00:00:00","ts_fin":"2014-06-30 23:59:59"},
{"id_periode":"3","name":"2014-2015","ts_debut":"2014-07-01 00:00:00","ts_fin":"2015-06-30 23:59:59"}
],
"id_periode":"2",
"temps_periode_utilisee":"present"},
"messages":[]}
*/
return res;
});
angular.module('mod_periodes').controller('CtrlChoixPeriode',implCtrlChoixPeriode);
function implCtrlChoixPeriode($scope, $resource, periodes) {
$scope.test="angular works";
//this way, different $scope vars are set when the resource is received
$scope.periodeJson=periodes.get(function() {
$scope.periodeSelectModel=$scope.periodeJson.data.periodes;
$scope.periodeSelect=$scope.periodeSelectModel[1];
});
}
</script>
</head>
<body>
<div ng-app='mod_periodes'>
<div id="appChoixPeriode" ng-controller='CtrlChoixPeriode'>
test:{{test}}<hr>
json periodes:{{periodeJson}}<hr>
Select periode:
<select ng-model="periodeSelect" ng-options="item.name for item in periodeSelectModel" ng-change="changePeriodeUtilisee()"></select>
</div><!--appChoixPeriode-->
</div>
</body>
由于跨域问题，小提琴不起作用。在您的实际实现中，资源是否位于不同的域中？可能是的，我从本地文件中尝试了此示例的本地版本。我会尝试将evrything放在同一台服务器上，看看它是否工作得更好。我知道这一点，因为我在没有跨域限制的浏览器中尝试了你的小提琴，它工作得很好。非常感谢，一旦evrything放在同一台服务器上，它就工作了。你知道如何处理跨服务器的案例吗？只是为了提供信息，我不需要它，但如果我能掌握如何实现这一点，那就太好了，这将取决于资源的服务方式。您会同意，从静态html文件获取它不是最好的。但是，您可以在这里获得有关CORS的一些有用信息