在ui-路由器的模板中使用$templateCache。-Using$templateCacheinui-router'stemplate

19  

The way how to dynamically set the dynamic template is not via the template property but templateProvider. There is a working plunker, and this is the snippet:

如何动态地设置动态模板不是通过模板属性，而是通过templateProvider。有一个工作的活塞，这是它的代码片段:

// 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'
    , '
dashboard
');
  })
.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'); 
      },
    })
});

See:

看到的:

• Templates
• 模板

And also, I would say, that not ownly you can use the $templateCache, but it is already used by ui-router. The main service responsible for loading templates (from url, string...) for our views is the:

而且，我想说，你不能只使用$templateCache，它已经被ui-router使用了。负责为我们的视图加载模板(从url、string…)的主要服务是:

• $templateFactory
• templateFactory美元

which, as its code shows, does use $templateCache as a natural optimization ($templateFactory code snippet:)

正如其代码所示，它使用$templateCache作为自然优化($templateFactory代码片段:)

...
/**
* @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.} 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; });
};
...

3  

Well, I just found out that you can simply set the key of your $templateCache template as the templateUrl route property and it works fine.

我刚刚发现，只需将$templateCache模板的键设置为templateUrl路径属性，它就可以正常工作。

0  

I do not know if it has already been solved, however, I decided to update my template as follows. I remember that I use AngularAMD / AngularUIRouter, but the templateURL works the same way. I use the function in templateURL, where I pass the "xxx" parameter equal to a new date every time, and this forces the page search again. I hope I have helped okay.

我不知道是否已经解决，但是我决定更新我的模板如下。我记得我使用了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'})
}
})

Once this is done, the code below works as expected:

一旦这样做了，下面的代码将按预期工作:

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