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'
  });

问题是我最终返回了一个承诺，而 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 api。

Answer 1

templateProvider 的函数可能会从 $resource 返回 Promise，但最终它必须返回字符串。

templateProvider: function (SomeService) {

    var promise = SomeService.get().$promise;

    promise.then(function (data) {
        console.log(data) // it has to be string!
    });

    return promise; 
}

如果有一个对象，解决方案之一是做出另一个承诺。

templateProvider: function (SomeService, $q) {

    var defer = $q.defer();

    var promise = SomeService.get().$promise;

    promise.then(function (data) {
        console.log(data) // let say this is {html: '<p>some template</p>'}
        defer.resolve(data.html);
    });

    return defer.promise; 
}

SomeService 返回 $resource。

Answer 2

原来我使用$resource 的方式有问题。我仍然不确定是什么。通过查看 angular-ui-router 的源代码，函数 can 返回一个承诺。我最终从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;
      })