在继续之前等到 $resource 完成加载到我的控制器中

Question

我正在使用 fosrestbundle 构建休息 api，我使用 angular 和 Twig 模板管理前端。我的 url 地址上的一个看起来像这样：

http://mywebsite/myroute/idContain

当我在浏览器中加载 url 时，在一个 twig 模板（类似于 html）中，我使用 ng 检索参数 "idContain"（来自 fosrestbundle 控制器） -init of angularjs 像这样：

<div class="container-fluid" ng-init="getContainByID({{ idContain }})">
  //...lot html div with angularjs directives
</div>

并且立即，ng-init 会去我的 angularJS 应用找到 getContainByID(idContain) 到运行它。这个看起来像这样：

angular.module("myApp", ["ngSanitize", 'angular.filter', 'ui.tinymce', ...])
.config(function($interpolateProvider, ...) {
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
})
    .controller("myCtrl",function ($filter,..., myService)
{
    // lot of code...
    $scope.getContainByID = function(idContain)
    {

        $scope.currentContain = myService.getContains(idContain);
        $scope.containRoot = $scope.currentContain.contain.containRoot;
        ...

    }
    // lot of code...
}

事实是，myService.getContains(idContain) 来自我的休息服务，看起来像这样：

angular.module("MyServiceRest", ['ngResource'])

.factory("myService",  function ($rootScope, $resource) {


    var apiData = $resource(
        "/api", {},
        {
            ...
            "getContains": {method: 'GET', isArray: false, url: "mywebsite/api/myroute/:containid"}
            ...
        });

    return {

        getContains: function (idContain) {
            return apiData.getContains({containid: idContain});
        }

    }
});

现在的问题是，当我运行我的 angularjs 应用程序时，$scope.containRoot 不会等到 myService.getContains(idContain)（来自我的异步$resource 服务）完成加载，并导致错误导致我的 webapp 崩溃。

我该怎么做才能强制 $scope.containRoot 和我的 angular 代码的其余部分等待 myService.getContains(idContain)（连接到 api 资源）完全完成在继续之前加载？

Answer 1

$resource 发出异步请求但立即返回空对象或数组。

您可以通过多种方式处理您的问题。

不用担心在视图中声明 $scope.containRoot 并只使用 currentContain.contain.containRoot。此属性将在收到请求后呈现

另一种是使用同样由$resource返回的$promise，并在promise callback

中分配作用域属性

$scope.currentContain = myService.getContains(idContain);

$scope.currentContain.$promise.then(function(){
        $scope.containRoot = $scope.currentContain.contain.containRoot;
});

另一种是使用基于相同承诺的路由解析，因此在请求完成之前不会输入路由（或状态取决于路由器）

在继续之前等到 $resource 完成加载到我的控制器中

Waiting until $resource finished to load in my controller before continuing

angularjs

rest

symfony

angular-resource

ngresource