Angular.js 模板解析钩子答案

【问题标题】：Angular.js template parsing hookAngular.js 模板解析钩子
【发布时间】：2014-08-22 06:24:03
【问题描述】：

我想知道 Angular 中是否有模板解析钩子，您可以在全局或特定控制器中使用它。

我想做的是实现一个特定于语言和设备（多维）的主题加载器，它将动态抓取任何资源链接（img-tags、inline-styles）并重定向到特定资源。

例如：有人实现了一个显示一些图像的模板：

<img src="images/my-super-image.jpg">

现在我想获取模板并将资源更改为特定于语言的对应对象：

<img src="theme/en_us/lowres/my-super-image.jpg">

以下几点对我很重要：

生成模板的人不需要处理主题，只需使用第一个示例中给出的资源
我不想使用指令，我想要一个全局（特定于应用程序的）解决方案 --> 最好将它放在应用程序的 run() 函数中
我不想对资源使用查找表，只是希望它具有高度动态性

目前我不太确定在哪里放置这样的 parse-hook-function，也不知道如何访问页面上使用的当前模板，以便在 Angular 将它们提供给 DOM 之前对其进行操作。

我使用了一些肮脏的技巧，但我对它不满意，因为它只会在模板已经渲染和提供时应用：

$(document).bind('DOMNodeInserted', function(event) {

  if(angular.isDefined(event.originalEvent.originalTarget.innerHTML)) {
    event.originalEvent.originalTarget.innerHTML = String(event.originalEvent.originalTarget.innerHTML).replace('src="images','src="' + imgPath);
  }
});

你知道怎么做吗？谢谢你们！

顺便说一句。我对 Angular 还是很陌生，所以如果你能描述得非常详细，那就太好了。再次感谢。

【问题讨论】：

也许您可以以某种方式深入了解$templateCache (docs.angularjs.org/api/ng/service/$templateCache)？我假设在某个时候选择了一个主题，所以也许你可以在那个时候以编程方式更改模板？这将需要预加载 $templateCache 而不是依赖 HTTP GET 来获取模板，这本身就是一件好事。
好的，但据我了解，TemplateCache 仅缓存模板，但不在运行范围内，这意味着，如果您在 TemplateCache 中有模板，则它已经提供给 DOM。我将再次支持 DOM 注入。对吗？
我需要它：1.) Angular 加载模板 2.) Hook：我抓取并编辑模板并将其返回给 Angular 3.) Angular 将模板注入 DOM
整个钩子是我不确定是否存在的东西。如果给定模板存在于缓存中，则 templateCache 的工作方式与听起来完全一样，它会从缓存中使用。您可以覆盖其中的模板。我能想到的唯一其他解决方案是创建一个指令并在 compile-function 中弄乱模板，但这需要在使用模板的任何地方添加该指令，并且您已经声明您不想要那种解决方案。跨度>
如果将模板添加到 $templateCache，我该如何查看？

标签： javascript angularjs templates controller

【解决方案1】：

你可以使用编译，因为 Angular 只允许指令来修改 DOM 你需要创建一个指令这是一个例子

app.directive('myApp', function() {
return {
restrict: 'A',
replace: true,
link: function(scope, element, attrs) {

},
compile: function(tElement, tAttrs, transclude) {
tElement.find('img')[0]['src'] = "theme/en_us/lowres/" + tElement.find('img')[0]       ['src'].split('/')[tElement.find('img')[0]['src'].split('/').length - 1];
 }
 };
 });

Plunker

【讨论】：