Fatal编程技术网
  • javascript/
  • Javascript 解决主控制器的承诺

Javascript 解决主控制器的承诺

javascript angularjs

Javascript 解决主控制器的承诺,javascript,angularjs,angular-promise,Javascript,Angularjs,Angular Promise,我正在尝试在创建我的最高控制器之前解决一个承诺。我正在使用ui.router，因此我知道如何解决控制器对我的不同路由的承诺。但在我的第一个控制器加载之前，我不知道如何解决它 这是my index.html的摘录： <html lang="de" x-ng-app="myapp"> <body x-ng-controller="MainController"> ... <div id="header" x-ng-include=

我正在尝试在创建我的最高控制器之前解决一个承诺。我正在使用ui.router，因此我知道如何解决控制器对我的不同路由的承诺。但在我的第一个控制器加载之前，我不知道如何解决它

这是my 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>
我想把这个函数的承诺注入我的主控制器：

controllers.controller('MainController', function($scope, currentSeason, SomeService) {
    $scope.season = currentSeason;
    $scope.stuff = SomeService.loadStuff(currentSeason);
});
我如何配置它？ 这适用于负责主体元素的控制器。所以我还没有在这里使用任何路由

我想要一些像

resolve: {
    currentSeason : function(RestAccess) {return RestAccess.loadCurrentSeason();}
}
但我不知道该放在哪里。

在路由配置中使用解析

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

})
我想这就是你要问的。这个问题有点模糊

您可以对抽象父状态进行解析，它将在单个具体子路由解析之前解析（因此可以在这些解析中使用）

例如：

//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.config（）中。。。
...
$stateProvider
.州（“家”{
url:“/”，
模板：“”，
摘要：没错，
决心：{
'parentResolve'：['yourService'，函数（yourService）{/*返回承诺*/}]
}
})
.state（“home.child”{
url:“/child”，
模板：“回家后”，
控制器：['parentResolve'，函数（parentResolve）{/*使用parentResolve*/}]，
决心：{
'childResolve'：['parentResolve'，'yourService'，function（parentResolve，yourService）{/*父解析可用，服务也是如此*/}]
}        
}
...
此外，您可以使用在加载任何状态之前运行某些内容。

复活节兔子先生

我遇到了一个非常类似的困境。顺便说一句，问题不在于您希望在加载控制器之前解决承诺，而是您希望在加载页面之前解决承诺，以防止呈现数据较少的页面

我的解决方案

  • 第一步。在承诺得到解决之前，您不希望加载页面/模板。这意味着，在有数据显示之前。对于该用途，NOT，因为“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>

    
...
    我想这可能也适用于您。

    这是否适用于我的index.html？（我对问题进行了编辑，使其更加清晰）不…您在原始问题中留下了太多的信息。目前，我的MainController的视图不在$stateProvider的配置范围内。我想我需要为您的解决方案更改它？是的，我会这样做。一般来说，将总体、无状态部分放在外部是可以的，但在这种情况下，Angular在<代码范围内>配置您需要的，并且您仍然能够表示它不属于某个特定状态，因此我不认为您真的在妥协任何事情。我使用抽象主状态将路由更改为您的建议。它可以正常工作，但有一点除外：当我尝试解析我的childR时，parentResolve未解析esolve（但已正确注入控制器）.当我调试它时，它是未定义的。但是我有一个解决方法。如果你不介意我问，你有什么解决方法？你介意发布你有什么和你想出了什么吗？如果我给出一个需要破解的答案，我会感到很难过，所以也许我可以改进它。我让它休息一天，现在家长决定我n子控制器的解析函数。不知道为什么。解决方法不值得一提。为什么不等待您的承诺来解析和隐藏内容，或者使用一些
    ng if=“currentSeason”
    或诸如此类的东西来做任何事？
    loadCurrentSeason。然后（函数（currentSeason）{$scope.currentSeason=currentSeason；}）
    您还可以有一个wrapping指令，它等待承诺，然后通过在某个“init”中通过参数为控制器提供解析值来调用控制器方法。这不是关于隐藏内容。这是关于调用需要此参数的服务方法。如果只是在少数几个控制器中，我会同意您的建议。但我需要在几十个控制器中使用此值。然后您可以让您的服务使用承诺而不是价值，这就是承诺的思想：将它们作为常规值进行操作ues，并注册一个
    ，然后在需要它们的值时注册一个
    。或者，如果本季的内容非常具体，您可以在启动应用程序之前先加载它，然后使用
    angular.bootstrap（…）启动编译
    我的问题是，我需要等待所有3-4个承诺能够继续。这将使代码变得非常复杂和不可读。我不知道angular.bootstrap（…），我想这是我问这个问题时想要的直截了当的答案。我决定走另一条路，将我的MainController包含到我的ui.router状态中。所以实际上你想在上面。html首先加载一些静态数据，然后再重新用于不同的控制器？这与显示无关。这是关于控制器代码正在运行。对于每个控制器，我需要5-8个非常静态的数据子集（来自服务器）在我可以使用这些数据值作为后续查询的参数之前加载。我不希望对每个控制器进行编程，以等待3-4个承诺在我开始工作之前全部解决。我希望它们以已解决状态注入控制器。

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