文字

$templateCache

- service in module ng

The first time a template is used, it is loaded in the template cache for quick retrieval. You can load templates directly into the cache in a script tag, or by consuming the $templateCache service directly.

Adding via the script tag:

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:rgb(51, 51, 51);">  </span><span style="box-sizing:border-box;color:navy;"><script</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">Type</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"text/ng-template"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">id</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"templateId.html"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">
    </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"><</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">p</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">></span><span style="box-sizing:border-box;color:rgb(68, 85, 136);">This</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> is the content of the template</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">p</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">
  </span><span style="box-sizing:border-box;color:navy;"></script></span></code>

注意： the script tag containing the template does not need to be included in the head of the document, but it must be below the ng-app definition.

Adding via the $templateCache service:

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:rgb(51, 51, 51);">var</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> myApp </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> angular</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">module</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'myApp'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">[]);</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">
myApp</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">run</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">Function</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">$templateCache</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">)</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">{</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">
  $templateCache</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">put</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'templateId.html'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'This is the content of the template'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">);</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">
</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">});</span></code>

To retrieve the template later, simply use it in your HTML:

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><div ng-include=" 'templateId.html' "></div></code>

or get it via Javascript:

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;">$templateCache.get('templateId.html')</code>

参见 $cacheFactory.

上一篇：ng/service/$sceDelegate下一篇：ng/service/$timeout

AngularJS: API: ng/service/$templateCache

$templateCache