6

もともと私のアプリでは、URL（$ routeParams）からオブジェクトのIDを取得することでリソースを取得するために、非常に基本的な$http呼び出しを使用してコントローラーを作成しました。Ng-repeatは結果を正しく表示します。

しかし、後のビュー（別のコントローラー）で更新すると、データが消去されてページが壊れることに気づきました。そこで、複数のコントローラーで使用する関数をサービス上に作成し、データが利用可能かどうかを確認し、次のように反応します。

1）リソースが定義されている場合は、それを返します（API呼び出しなし）2）リソースが定義されていない場合は、URLからIDを取得し、APIから取得します3）リソースが定義されておらず、取得できない場合ID、falseを返すだけです。

ただし、これによりコードが破損しました。サービスがデータを返す前にレンダリングされたテンプレートであり、ng-repeatは更新されませんでした。コードは次のようになります。

angular.module('myApp', ['ngCookies'])
    .config(...)
    .service('myService', ['$cookies', '$http', function($cookies, $http) {
        myData = {};

        return {
            getData:function(dataID) {
                if(myData.name) {return myData);
                else if (dataID && dataID !== '') {
                    $http.get('/api/data/' + dataID)
                        .success(function(data) {
                            myData = data.object;
                            $cookies.dataID = data.object.id;
                            return myData;
                        }
                }
                else { return false; }
            }
        }
    }]);

function myCtrl($scope, $http, $routeParams, myService) {
    $scope.data = myService.getData($routeParams.dataID);

    ...
}

そして、これがテンプレートです。これは翡翠の中にあります。つまり、山かっこではなく、要素の直後に括弧で囲まれたパラメーターと、括弧の後にあるコンテンツをリストします。

h2 My heading
ul
    li(ng-repeat='option in data')
        a(href="#", ng-click='someFuncInCtrl(option.name)')  {{ option.name }}

コントローラが$http.get自体を実行したとき、$ scopeが「.success」コールバックで更新されたため、ng-repeatは正常に機能しました。わずかな遅延の後にデータを返すサービスがあるので、「$ scope.data」は未定義であり、ng-repeatリストは空です。

「returnmyData」を返す直前にconsole.logを使用してmyDataをチェックしましたが、myDataは機能していますが、時間内に返されません。何らかの理由で、$scopeがデータを取得するたびにリストが更新されません。

$ routeProviderのresolveを使用しているように見えましたが、resolveオブジェクトが$ routeParamsにアクセスできないようであるため、URLからIDを取得するのは困難です。$scope。$applyは、外部関数によって変更されたときにスコープを更新するのに役立つはずです...しかし、どこに配置するかわかりません。SOで最も類似した問題は、サービスを使用しませんでした。

私は試した：

$scope.$apply($scope.data = myService.getData($routeParams.dataID));

と

$scope.$apply(function() {
    $scope.data = myService($routeParams.dataID);
});

どちらの場合も、エラーが発生しただけです。$digestはすでに進行中です。

4

1 に答える 1

11

問題は、サービスとのやり取りの途中にあります。getData関数は同期情報と非同期情報の両方を返すことができるため、通常の情報だけを使用することはできませんreturn。

$http.get('/api/data/' + dataID)
    .success(function(data) {
        myData = data.object;
        $cookies.dataID = data.object.id;
        return myData;
    });

上記returnのスニペットは、成功コールバックgetDataのコンテキストで実行されるため（呼び出しスタックではなく）、から何も返しません。$http.getgetData

同期および非同期サービスリクエストを処理するための最良のアプローチは、promiseを使用することです。

関数getDataは次のようになります。

getData:function(dataID) {
    var deferred = $q.defer();
    if(myData.name) {
       deferred.resolve(myData);
    } else if (dataID && dataID !== '') {
        $http.get('/api/data/' + dataID)
            .success(function(data) {
                 myData = data.object;
                 $cookies.dataID = data.object.id;
                 deferred.resolve(myData);
                 // update angular's scopes
                 $rootScope.$$phase || $rootScope.$apply();
             });
    } else { 
       deferred.reject();
    }

    return deferred.promise;
}

注：サービスにを注入する必要があり$rootScopeます。

そしてあなたのコントローラーで：

function myCtrl($scope, $http, $routeParams, myService) {
    myService.getData($routeParams.dataID).then(function(data) {
        // request was successful
        $scope.data = data;        
    }, function() {
        // request failed (same as your 'return false')
        $scope.data = undefined;
    });
}
于 2013-02-19T00:25:53.913 に答える