0

これは angularjs サービスに関する基本的な質問です。

次のコードを持つ非常に単純なアプリを作成しました。

var App = angular.module('testApp', ['testService']);

App.config(['$routeProvider', function($routeProvider)
{
  $routeProvider
  .when('/', {templateUrl: 'partials/dataDisplay.html', controller: testCtrl})
  .otherwise({redirectTo: '/'});
}]);

angular.module('testService', []).
factory('svcTest', function($http){
    var myService = 
        {
            getPeopleInfo: function()
            {
                $http.get('/test/app/data/getData.php').success(function(data) {
                     console.log("Data : " + data.people);
                     return  data.people;
                });
            }
        };
    return myService;
});


function testCtrl($scope, svcTest) {
    $scope.people = svcTest.getPeopleInfo();
}

「$http.get」を実行すると、実際にデータを取得しています (さらに getData.php も有効な JSON を返します)。ただし、データが testCtrl に更新されることはありません。Angularjs の初心者である私が非常にばかげたことをしているのかどうかはわかりません。

ただし、サービスを削除してコントローラ内に http.get を追加すると、データが取得されてビューに更新されます。

function testCtrl($scope, $http) {
        $http.get('/test/app/data/getData.php').success(function(data) {
                 $scope.people = data.people;
        });
}

サービスで使用するコードの根本的な問題は何ですか?

ところで、私の HTML は非常に単純で、これらの情報を単純な表形式で表示します。

4

1 に答える 1

1

コードを次のように書き換えてください。

angular.module('testService', []).
factory('svcTest', function($http){
    var myService = 
        {
            getPeopleInfo: function()
            {
                return $http.get('/test/app/data/getData.php')
            }
        };
    return myService;
});

function testCtrl($scope, svcTest) {
    var peoplesPromise = svcTest.getPeopleInfo();
    peoplesPromise.success(function(data){
        $scope.people = data.people
    })

}

は、リッスンできるコールバックを持つ$httppromise オブジェクトを返します。successerror

コントローラー内で promise を取得してコールバックにアタッチすると、コントローラーのスコープ ( ) にアクセスできるようになりますtestCtrl。次に、コールバック内から、リクエストからのレスポンスでtestCtrlのプロパティを更新しています。people

于 2013-04-05T06:08:13.327 に答える