Angular.js模板解析挂钩

Question

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

我要做的是实现一种语言和特定于设备的（多维）主题加载器，该加载器将动态获取任何资源链接（img标签，内联样式）并重定向到特定资源。

例如：某人实施了显示一些图像的模板：

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

现在，我想获取模板并将资源更改为特定于语言的通讯员：

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

以下内容对我很重要：

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

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

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

$(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

您可以使用compile，因为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