Question

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

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

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

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

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

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

以下事项对我很重要：

生成模板的人不需要处理主题，只需使用第一个示例中给出的资源
我不想使用指令，我想要一个全局（特定于App）的解决方案 - ＆gt;最好的是将它放在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很新，所以如果你想要非常具有描述性，那就太好了。再次感谢。

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

Angular.js模板解析钩子

1 个答案: