Angular.js模板解析钩子

Question

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

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

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

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

现在，我想获取模板并将重新源更改为它特定于语言的对应程序：

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

以下几点对我来说很重要：

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

目前，我不太确定在哪里放置这样的解析钩子函数，也不知道如何访问页面上使用的当前模板，以便在角向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);
  }
});

你知道怎么做吗？谢谢各位！

顺便说一句。我对角很陌生，所以如果你能描述的话，那就太好了。再次感谢。

Answer 1

您可以使用编译，因为角只允许指令修改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];
 }
 };
 });

柱塞