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

Question

我正在使用angular-ui-router构建一个角度应用程序.后端有一个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需要一串内容.我想做的就是返回网址:

$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时我没有得到依赖注入,我仍然有它返回一个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;
      })