15

必要なデータがサーバーから到着するまで、コントローラーの初期化を遅らせたいと考えています。

Angular 1.0.1 のこのソリューションを見つけました:ちらつきを防ぐためにモデルが読み込まれるまで AngularJS ルートの変更を遅らせるが、Angular 1.1.0 で動作させることができませんでした

テンプレート

<script type="text/ng-template" id="/editor-tpl.html">
Editor Template {{datasets}}
</script>
    <div ng-view>
</div>

</p>

JavaScript

function MyCtrl($scope) {    
    $scope.datasets = "initial value";
}

MyCtrl.resolve = {
    datasets : function($q, $http, $location) {
        var deferred = $q.defer();

        //use setTimeout instead of $http.get to simulate waiting for reply from server
        setTimeout(function(){
            console.log("whatever");
            deferred.resolve("updated value");
        }, 2000);

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});​

http://jsfiddle.net/dTJ9N/1/

4

3 に答える 3

11

$http は promise を返すため、http データが到着したときに promise を返すためだけに独自の deferred を作成すると、パフォーマンスが低下します。あなたはできるはずです：

MyCtrl.resolve = {
    datasets: function ($http) {
        return $http({method: 'GET', url: '/someUrl'});
    }
};

結果の処理を行う必要がある場合は、.then を使用します。Promise は無料で連鎖されます。

MyCtrl.resolve = {
    datasets: function ($http) {
        return $http({method: 'GET', url: '/someUrl'})
               .then (function (data) {
                   return frob (data);
               });
    }
};
于 2012-09-11T14:14:49.373 に答える
4

いつでも、最も外側のDOM要素に「ng-show」を配置して、待機するデータと同じ値に設定できます。

Angular JSホームページにリストされている例では、それがいかに簡単であるかを確認できます。http: //plnkr.co/CQu8QB94Ra687IK6KgHn このようにすると、その値が設定されるまでフォームは表示されません。

はるかに直感的で、この方法での作業は少なくなります。

于 2013-01-17T17:35:28.067 に答える
1

ここでは、リソースを使用するほぼ同じ質問を見ることができますが、$httpでも同じように機能します。これでうまくいくと思います

function MyCtrl($scope, datasets) {    
    $scope.datasets = datasets;
}

MyCtrl.resolve = {
    datasets: function($http, $q) {
        var deferred = $q.defer();

        $http({method: 'GET', url: '/someUrl'})
            .success(function(data) {
                deferred.resolve(data)
        }

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});​
于 2012-09-10T17:07:51.843 に答える