在ui-router模板中使用$ templateCache

我可以在ui-router模板中使用$ templateCache嗎？

該模板將被緩存在解析部分，我想在相同的狀態使用緩存模板。

$stateProvider 
.state('dashboard', { 
    url: "/dashboard", 
    template: function($templateCache){ 
     console.log('test 2'); 
     return $templateCache.get('templates/template1.html'); // returns undefined 
    }, 
    resolve:{ 
     baseTemplates: function($ocLazyLoad) { 
      // here the template will be cached... 
      return $ocLazyLoad.loadTemplateFile(['base/dashboard.html']).then(function(){ 
       console.log('test 1'); 
      }); 
     } 
    } 
}) 
// console prints "test 2" before than "test 1"

更新：（+代碼更新）

我覺得我的代碼解決部分有問題。因爲它在模板部分之後運行！它會導致返回$ templateCache.get未定義。

我使用ocLazyLoad插件來緩存模板，它返回一個正確的承諾。

爲什麼模板不等待解決？

來源

2014-07-09 Morteza Ziaeemehr

你得到什麼錯誤？只是一個猜測，但你可能不得不使用'$ templateCacheProvider'，因爲你正在定義module.config（） - [providers]（https://docs.angularjs.org/guide/providers）中的路由 – Benmj

對不起。那是一個錯誤。錯誤來自另一節。但主要問題還在那裏。 –

如何動態地設置動態模板的方式不是通過template財產，但templateProvider。有一個工作plunker，這也是片段：

// this is a run event (executed after config in fact) 
// in which we do inejct a value into $templateCache 
.run(function($templateCache){ 
    // this could be lazy... elswhere 
    $templateCache.put('templates/template1.html' 
    , '<div><h4>dashboard</h4></div>'); 
    }) 
.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/dashboard'); 

    $stateProvider.state('dashboard', { 
     url: '/dashboard', 
     // this is the place where to resolve dynamic template 
     templateProvider: function($templateCache){ 
     // simplified, expecting that the cache is filled 
     // there should be some checking... and async $http loading if not found 
     return $templateCache.get('templates/template1.html'); 
     }, 
    }) 
});

參見：

Templates

還有，我會說，這不是ownly你可以使用$templateCache，但它已被ui-router使用。負責裝載模板（從網址，串...）我們的觀點主要服務是：

$templateFactory

它，因爲它的代碼所示，確實使用$templateCache作爲一種天然優化（$templateFactorycode snippet :)

... 
/** 
* @ngdoc function 
* @name ui.router.util.$templateFactory#fromUrl 
* @methodOf ui.router.util.$templateFactory 
* 
* @description 
* Loads a template from the a URL via `$http` and `$templateCache`. 
* 
* @param {string|Function} url url of the template to load, or a function 
* that returns a url. 
* @param {Object} params Parameters to pass to the url function. 
* @return {string|Promise.<string>} The template html as a string, or a promise 
* for that string. 
*/ 
this.fromUrl = function (url, params) { 
    if (isFunction(url)) url = url(params); 
    if (url == null) return null; 
    else return $http 
     .get(url, { cache: $templateCache }) 
     .then(function(response) { return response.data; }); 
}; 
...

來源

2014-07-09 17:45:22

對不起，我的問題有問題。我更新了它。 –

謝謝。使用templateProvider並返回templateProvider內部lazyLoad的結果，問題解決了。到目前爲止，我還沒有看到templateProvider關鍵字。 –

好吧，我只是found out，你可以簡單地將$templateCache模板的密鑰設置爲templateUrl路由屬性，它工作正常。

來源

2015-11-18 22:49:09 pootzko

我不知道它是否已經解決，但是，我決定更新我的模板如下。我記得我使用AngularAMD/AngularUIRouter，但templateURL的工作方式相同。我在templateURL中使用函數，每次傳遞等於新日期的「xxx」參數，這又強制頁面搜索。我希望我能幫上忙。

.state ('MyReports', { 
    parent: 'index', 
    url: '/MyReports/:cd_menu', 
    views: { 
     'BodyView': angularAMD.route ({templateUrl: function (params) { 
     return "MyReportsAction/getTemplate?cd_menu="+ params.cd_menu + "&xxx="+ new Date(); 
    }, 
    controllerUrl: 'js/app/base/controllers/MyReportsController', 
    controller: 'MyReportsController'}) 
} 
})

一旦做到這一點，如預期之下作品代碼：

$state.go('MyReports', {'cd_menu': cd_menu});

來源

2017-06-01 20:06:48

在ui-router模板中使用$ templateCache

回答

相關問題