angularjs - 在 ui-router 的模板中使用 $templateCache

Question

我可以在 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 插件来缓存模板，它返回一个正确的 promise 。

为什么模板不等待解析？

Answer 1

动态设置动态模板的方式不是通过template属性(property)但 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

而且，我想说，这不是你自己 可以 使用 $templateCache ，但它已经被 ui-router 使用了.负责为我们的 View 加载模板(来自 url、字符串...)的主要服务是:

$templateFactory

正如其代码所示，它确实使用了 $templateCache作为自然优化 ( $templateFactory code 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; });
};
...