Question

我是AngularJS的新手。我需要在路由更改期间进行异步外部调用（某些API），并在此调用返回一些有效的JS对象时显示新的页面内容，比如var MySpecialObject。

我会将新视图显示延迟最多3秒，但直到对象准备就绪。因此，如果我在更短的时间内获得对象 - 更有可能 - 我希望立即显示新内容。

1.启动通话的最佳方式是什么？

2.定义此对象后，如何显示新视图？

我尝试使用路线resolve。下面的代码是我成功开始的，但我认为它不能很好地解决'承诺'。将对象返回到页面后如何显示新视图？换句话说，我想在对象就绪时取消超时。

 app.controller('PageCtrl', function($scope) {
   $scope.$on('$routeChangeStart', function(next, current) { 
      //API call here
   });

 app.config(['$routeProvider', function ($routeProvider) {
   $routeProvider
   .when("/", {templateUrl: "partials/home.html", 
             controller: "PageCtrl", 
             resolve:{
                        delay: function ($q, $timeout) {
                            var defer = $q.defer();
                            $timeout(function () {
                              if(typeof MySpecialObject !== 'undefined')  
                                defer.resolve('Resolve'); 
                            }, 3000);
                            return defer.promise;
                        }
                    }

             })

Answer 1

您无需添加延迟。由于您正在声明resolve函数，因此路由器知道不会实际导航到新路由（从而呈现视图），直到实际解析了承诺的解析。

你想要的是：

app.config(['$routeProvider', function ($routeProvider) {
       $routeProvider
       .when("/", {templateUrl: "partials/home.html", 
                 controller: "PageCtrl", 
                 resolve:{
                            yourData: function ($q) {
                                var defer = $q.defer();

                                // do some work that will resolve the promise

                                return defer.promise;
                            }
                        }

                 })

并且解析后的数据可以像这样注入控制器：

app.controller('DestinationController', function($scope, yourData) {
   $scope.data = yourData;
});

承诺准备就绪时解决

1 个答案: