Question

我的情况是这样的：

我有一个类似下面的模板，虽然我已经简化了它并只保留了关键部分。

...
<div>
     <div ng-if="status.sidebarLoaded">
          <div id="sidebar">
               <div ng-repeat="menuItem in sidebar.sidebarMenu">
                    <p>{{menuItem}}</p>
               </div>
          </div>
     </div>
     <div ng-if="status.mainLoaded">
          <div id="main">
               <div ng-include="'theTemplate'" onload="thing=main.thing">
               </div>
          </div>
     </div>
</div>
<script type="text/ng-template" id="theTemplate.html">
     {{thing}}
</script>

在控制器中，我有一连串的承诺：

    getSidebarFromHttp()
        .then(function(){
            $scope.status.sidebarLoaded = true;
            getMainStuff();
        })
        .then(function(){
            $scope.status.mainLoaded = true;
        });

理论上，这应该会导致sidebar出现，{{thing}}的值会被评估。 但{{thing}}只是空白。

我意识到这不起作用的原因是因为$scope.status.mainLoaded = true;在从getMainStuff()获取的值正确绑定到模板中的表达式之前执行。我通过向上一个.then()添加超时来发现这一点，就像这样

       .then(function(){
            $timeout(function(){
                $scope.status.mainLoaded = true;
            }, 3000);
        }

所以我的问题是，如何将mainLoaded设置为true 仅AFTER 所有值都是前一个函数绑定的？是否有特殊类型的承诺可以做到这一点？

Answer 1

您可以通过向getMainStuff()

添加回调来实现

function getMainStuff(callback){
    // DO SOMETHING
    calback();
}

你的函数调用应该是这样的

getSidebarFromHttp()
    .then(function(){
        // callback function to set $scope.status.sidebarLoaded after some method executed
        var callback = function(){
            $scope.status.sidebarLoaded = true;
        }
        // call getMainStuff with callback function as paramter
        getMainStuff(callback);
    })
    .then(function(){
        $scope.status.mainLoaded = true;
    });

只有在更新绑定表达式后，如何解决承诺？

1 个答案: