Angular-UI-Router - 獲取動態模板的內容

我正在使用angular-ui-router構建一個角度應用程序。後臺有一個REST api，它根據票證ID爲我提供表單的URL。在app.js中，我想根據對此REST服務的查詢動態設置模板。例如：Angular-UI-Router - 獲取動態模板的內容

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

但使用templateUrl代替templateProvider按https://github.com/angular-ui/ui-router/wiki#wiki-templates當我不明白的依賴注入，我仍然有它返回一個承諾的問題。我想也許我唯一的解決方案是不使用promise API。

來源

2014-01-27 xdhmoore

原來我在使用$resource的方式出了點問題。我仍然不確定是什麼。從查看angular-ui-router的來源，功能可以返回一個承諾。我結束了複製一些代碼從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; 
     })

來源

2014-01-27 21:46:48 xdhmoore

+14

您也可以使用'return $ templateFactory.fromUrl（url）' –

+1 - 正是我需要指出我正確的方向。無論我現在使用$ http.get（）如何包含它，我都無法讓我的服務工作（未定義）。我還必須使用Josh的$ templateFactory片段來獲得結果。 – spryce

這工作得很好 –

函數templateProvider可以從$資源，但它必須返回字符串末尾返回承諾。

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返回$資源。

來源

2015-02-13 18:26:57

Angular-UI-Router - 獲取動態模板的內容

回答

相關問題