I'm curious if Angular has a template parsing hook that can be used globally or within specific controllers.
My goal is to create a language and device-specific theme loader that can dynamically retrieve resource links (such as img tags and inline styles) and redirect them to the appropriate resources.
For instance, let's say someone has implemented a template displaying an image:
<img src="images/my-super-image.jpg">
Now, I want to modify the template and change the resource to its language-specific equivalent:
<img src="theme/en_us/lowres/my-super-image.jpg">
Here are key points for me:
- The template creator shouldn't worry about themes; they just use the resource as shown in the initial example.
- I prefer not to use a directive but rather have a global solution specific to the app—ideally incorporated into the app's run function.
- I aim for a highly dynamic approach without relying on lookup tables for resources.
Currently, I'm unsure of where to place a parse hook function like this one or how to access the templates being used on a page before Angular renders them to the DOM.
I've resorted to a somewhat messy workaround, which I'm not satisfied with because it only applies after templates have been rendered:
$(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);
}
});
Do you have any suggestions on how to achieve this? Thank you all!
By the way, I'm new to Angular, so detailed explanations would be greatly appreciated. Thanks again!