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时，我没有得到依赖注入，而且我仍然有返回promise的问题。我在想，也许我唯一的解决方案就是不使用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。