javascript - Angular-UI-Router - 获取动态模板的内容

Question

我正在使用 angular-ui-router 构建一个 Angular 应用程序。后端有一个 REST api，它根据工单 ID 为我提供表单的 url。在 app.js 中，我想根据对此 REST 服务的查询动态设置模板。示例:

$stateProvider
  .state('form', {
    url: '/form/:id',
    templateProvider: function ($resource, formResolver, $stateParams) {

      //formResolver calls the REST API with the form id and gets back a URL.
      return formResolver.resolve($stateParams.id).then(function(url) {
        return $resource(url).get();
      };

    },
    controller: 'MyCtrl'
  });

问题是我最终返回了一个 promise ，而 templateProvider 需要一串内容。我想做的只是返回 url:

$stateProvider
  .state('form', {
    url: '/form/:id',

    //I would like to inject formResolver, but I can't
    templateUrl: function (stateParams, formResolver) {
      return formResolver.resolve(stateParams.id);
    },
    controller: 'MyCtrl'
  });

但是根据 https://github.com/angular-ui/ui-router/wiki#wiki-templates，当使用 templateUrl 而不是 templateProvider 时，我没有得到依赖注入(inject)，我仍然有它返回 promise 的问题。我在想也许我唯一的解决方案就是不使用 promise api。

Answer 1

原来我使用 $resource 的方式有问题。我仍然不确定是什么。通过查看 angular-ui-router 的源代码，函数可以返回一个 promise 。我最终从 https://github.com/angular-ui/ui-router/blob/master/src/templateFactory.js 复制了一些代码获得以下内容，这是有效的:

    templateProvider: function ($http, formService, $stateParams) {
      return formService.getFormUrl($stateParams.id).then(function(url) {
        return $http.get(url);
      }).then(function(response) {
        return response.data;
      })