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的方式有問題。 我還不確定是什么。 return a promise. 通過查看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;
      })

Answer 2

templateProvider的函數可以從$ resource返回promise，但最后它必須返回string。

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 。