0

Let's say I have an angularjs directive with a template like this:

<span>{{ myLabel }}</span>

Is there an event/service I could tap into to get the resulting interpolated html e.g:

<span>My Label Text</span>

I sure could scrape all html on the page with vanilla js or jquery, outside of angular. But I want it to be contextual to a directive, and I want to do it in a particular moment in time - when the interpolation happens, or a bound variable changes.

Alternative way I could define my task: I want to get all variables (their values) on the scope that are bound to the template (not just all variables on the scope, that's a no-brainer obviously).

xman85
  • 67
  • 1
  • 2
  • 8
  • I'd think the best way would be through either an explicit Id or one that you generate and looking it up through jQuery, but what exactly is it that you need the interpolated html for? I think ideally (and for maintainability) you want to leave the templates alone as much as possible, and do whatever manipulation you need on the data behind the scenes. If you need data from outside the scope, I'd suggest passing a view model into the directive and accessing it from there. Using $parent to get information from an outer scope is possible, but can be very dangerous (and also hard to maintain). – Dortimer Mar 04 '19 at 18:06
  • Going via data layer might be problematic, bc in our app it's not consistent. Besides, I don't need to manipulate data, only look it up. So, I figured going via angular view layer will be a consistent and universal way (as it's enforced by the framework itself). – xman85 Mar 04 '19 at 19:04
  • If you absolutely can't use a directive/controller's scope to access the information in the "code-behind" file, then I'd say jQuery is your best bet. One thing I'd suggest, if possible, is to use dynamic Id's that the directive/controller has access to. You should be able to pass it through a binding. something along the lines of . Here's a link with a little more information with dynamic ids: https://stackoverflow.com/questions/23655009/how-to-set-the-id-attribute-of-a-html-element-dynamically-with-angularjs-1-x – Dortimer Mar 04 '19 at 20:37
  • The only thing I can think of is (and may be a long shot) but is to get the template from templateCache service then parse it for all interpolated variable names. Then use the angular.element() to get the HTML content and try to marry them up. I don't think the compile service keeps a map of which values where interpolated during it running. – kendavidson Apr 17 '19 at 00:50

0 Answers0