Question

我一直在使用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];
}

Answer 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>

Angularjs资源服务示例

1 个答案: