javascript - Angular.js 模板解析钩子(Hook)

Question

我想知道 Angular 中是否有一个模板解析钩子(Hook)，您可以在全局或特定 Controller 中使用它。

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

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

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

现在我想获取模板并将资源更改为其语言特定的对应项:

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

以下事情对我来说很重要:

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

目前我不太确定在哪里放置这样的解析钩子(Hook)函数，也不知道如何访问页面上使用的当前模板，以便在 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 还很陌生，所以如果您能详细描述一下，那就太好了。再次感谢。

Answer 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