Question

我正在试图在创建我的最顶层控制器之前弄清楚如何解决一个承诺。我正在使用ui.router所以我知道如何解决我的不同路由的控制器的承诺。但我不知道在第一个控制器加载之前如何解决它。

这是我的index.html的摘录：

<html lang="de" x-ng-app="myapp">
    <body x-ng-controller="MainController">
        ...
        <div id="header" x-ng-include="'top.html'"></div>
        ...
        <div id="viewDiv" ui-view></div>
        ...
    </body>
</html>

我想从服务器加载当前季节（以及很少会发生变化的其他数据），并将其注入我的top.html标题和某些视图控制器的控制器中。我有一项服务加载我当前的季节并返回一个承诺：

services.factory('RestAccess', function(Restangular) {
    return {
        loadCurrentSeason : loadCurrentSeason
    };

    function loadCurrentSeason() {
        return Restangular.one('season','current').get();
    }
});

我希望在我的MainController中注入此函数的RESOLVED承诺：

controllers.controller('MainController', function($scope, currentSeason, SomeService) {
    $scope.season = currentSeason;
    $scope.stuff = SomeService.loadStuff(currentSeason);
});

我该如何配置？这是由负责body-element的Controller。所以我还没有在这里使用任何路由。

我想要像

这样的东西

resolve: {
    currentSeason : function(RestAccess) {return RestAccess.loadCurrentSeason();}
}

但我不知道在哪里放这个。

Answer 1

您可以拥有抽象父状态的决心，该状态将在具体的具体子路由之前解决。解析（因此可以在中使用）。

示例：

//In module.config()... ... $stateProvider .state('home', { url:'/', template: '<div ui-view></div>', abstract: true, resolve: { 'parentResolve':['yourService', function(yourService){ /*Return promise*/ }] } }) .state('home.child', { url:'/child', template: '<div>After home</div>', controller: ['parentResolve', function(parentResolve){ /*Use parentresolve*/ }], resolve: { 'childResolve':['parentResolve','yourService', function(parentResolve, yourService){ /*Parent resolve is available, as is service*/ }] } } ...

此外，您可以在尝试加载任何状态之前使用module.run()运行某些内容。

Answer 2

在路由配置中使用解析

.state('someState',{
   url:'....',
   controller:'MainController',
   resolve:{
      currentSeason:function(SomeService){
         // return the promise needed to resolve for injected variable
         return SomeService.someMethod();
      }
   }

})

我认为这就是你要问的。问题有点模糊

Answer 3

先生。复活节兔子，

我有一个非常相似的困境。顺便说一下，问题不在于你想要在加载控制器之前解析promise，而是要在页面加载之前解析promise，以防止呈现无数据页面。

我的解决方案

第一步。在承诺解决之前，您不希望加载页面/模板。意思是，直到有数据显示。对于那个用途ngIf，NOT ngShow，因为“ngIf”只会在条件为真时呈现页面，即存在数据时。
让'MainController'维护一个变量，指示数据是否已加载（意味着，承诺已解决），并让ngIf监视该变量。

为此，创建一个服务（或服务模型 - 无论你想调用它），它保存了promise所返回的数据。

angular('app').factory('dataServiceModel', function(){

   var dataModel= this;

   var dataModel.someData = {};

   return dataModel;
});

在控制器中，填充promise回调函数中的数据并设置变量，让ngIf知道有数据要显示。

angular('app').controller('MainController', ['dataServiceModel'], function(){

var mainController = this;

mainController.loadedData = false;

mainController.getTheDataFromTheServer(){
      ... 
      ...
      { // Callback to the promise and on successful retrieval
        dataServiceModel.someData = ... the data ..
        mainController.loadedData = true
      }
   }
});

现在来自加价;

<ANY ng-controller="MainController as mainController"
  ng-if="mainController.loadedData">
...
</ANY>

我认为这对你也有用。

解决MainController的承诺

3 个答案: