Angularjs资源服务示例

我一直在使用angularjs服务ans资源一段时间，并且无法得到我错过的东西。Angularjs资源服务示例

这里是我的榜样的小提琴： http://jsfiddle.net/spacm/bfUVj/47/ （详情如下代码）

这拨弄尝试加载从网络资源时段（2012-2013,2013-2014 ...），以填补选择。

小提琴不起作用，我期待$ scope.perriodeJson被periodes服务填充。 http get请求运行，但我只得到一个空对象，并没有得到我期望的承诺的任何更新。 Thanx用于指出此代码中的错误，并提供增强功能。

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

来源

2014-01-09 spacm

的小提琴不会因为跨域问题的工作。资源是否位于实际实施的不同域中？ – kubuntu

也许是的，我从本地文件中直接尝试了本示例的本地版本。我会尽量把evrything放在同一台服务器上，看看它是否更好。 – spacm

我知道这一点，因为在浏览器中试过你的小提琴，没有跨域限制，它工作。 – kubuntu

正如指出的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>

来源

2014-01-09 12:58:15 spacm

Angularjs资源服务示例

回答

相关问题