角UI路由器 - 解决不能等待的承诺来解决？ [英] Angular-UI Router - Resolve not waiting for promise to resolve?

问题描述

总结一下，我采用了棱角分明的UI路由器解析函数来检索状态的具体数据。然而，它似乎并没有完全等待的承诺来解决：

 状态（'parent.ChildState'，{
                网址：'？/ myUrl参数1＆放大器;参数1'，
                templateUrl：意见/ list.view.html'，
                控制器：'myController的，
                解析：{
                    数据：resolveData
                }
            }）。    功能resolveData（$ stateParams，utils的）{
        VAR过滤器= Utils.getFilters（$ stateParams）;        DataService.myDataObj = DataService.get（过滤器，功能（结果，标题）{
            DataService.myDataObj =结果;
        }）;
        返回DataService.myDataObj;        //注意我也曾尝试直接返回了DataService.get通话然而，这使所有的不确定（参见下面的控制器code知道我的意思）下面的控制台日志报表。所以我先做作业，然后返回。
    }
 

现在在控制器我有这样的负载执行像这样一个功能：

 函数ExpensesController（DataService的）{        $ scope.viewData = DataService的;        initData（）;        功能initData（）{
            //这通常会记录一个ngResource，并显示在控制台上的全部数据OBJ
            的console.log（$ scope.viewData.myDataObj）;           //这个被不确定的控制台上
           的console.log（$ scope.viewData.myDataObj.someField1）;           //此日志正常，但是为什么我需要做的承诺
           //解决？应该已经解决了吗？
           $ scope.viewData.myDataObj。$ promise.then（函数（）{
               的console.log（$ scope.viewData.myDataObj.someField1）;
           }）;
 

解决方案

当你需要的数据，以解决是异步，你需要返回一个承诺，并添加在收益语句回调函数。

 函数resolveData（$ stateParams，utils的）{
    VAR过滤器= Utils.getFilters（$ stateParams）;    返回DataService.get（过滤器，功能（结果，标题）{
         DataService.myDataObj =结果;
         返回DataService.myDataObj
    }）;
}
 

您可以阅读 UI路由器解析文档更多关于如何解析工作时，他们应该返回承诺或纯值。

So to summarise I am using angular-ui router resolve function to retrieve state specific data. However it doesn't seem to full wait for the promise to resolve:

state('parent.ChildState', {
                url: '/myUrl?param1&param1',
                templateUrl: 'views/list.view.html',
                controller: 'MyController',
                resolve: {
                    data: resolveData
                }
            }).

    function resolveData($stateParams, Utils) {
        var filters = Utils.getFilters($stateParams);

        DataService.myDataObj = DataService.get(filters, function(result, headers) {
            DataService.myDataObj = result;
        });
        return DataService.myDataObj;

        // Note I have also tried returning directly the DataService.get call however this makes all the below console log statements as undefined (see below for the controller code to know what I mean). So I do the assignment first and then return that.
    }

Now in the controller I had a function that executes on load like so:

    function ExpensesController(DataService) {

        $scope.viewData = DataService;

        initData();

        function initData() {
            // this generally logs a ngResource and shows the full data obj on console
            console.log($scope.viewData.myDataObj);

           // this gets undefined on console
           console.log($scope.viewData.myDataObj.someField1); 

           // this log fine, however why do I need to do promise      
           // resolve? should be resolved already right?
           $scope.viewData.myDataObj.$promise.then(function() {
               console.log($scope.viewData.myDataObj.someField1);
           });

解决方案

As your required data to resolve is async, you need to return a promise and add return statement inside your callback function.

function resolveData($stateParams, Utils) {
    var filters = Utils.getFilters($stateParams);

    return DataService.get(filters, function(result, headers) {
         DataService.myDataObj = result;
         return DataService.myDataObj
    });
}

You can read ui-router resolve docs more about how resolver works and when they should return promise or pure values.

这篇关于角UI路由器 - 解决不能等待的承诺来解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！