Get the HTML output from an Angular template in javascript

Question

I have an angular template that I would like to be able to access the processed HTML from within a javascript function.

If for example the template was under a templateUrl

 "/scheduler/tooltip.html"

and the HTML was something like

 <div>{{tip.Name}}</div>

is the a way to call and process that template without using all of the directive overhead? eg:

 angular.$compiletemplate('/scheduler/tooltip.html', { tip: { Name: "foo" }});

In this case I'm specifically trying to solve the problem of a third party library appending a DOM element outside of the existing angular scope - so I seem to be unable to make the HTML a directive.

If there is a way to make sure a directive will work anywhere on the page that might also be useful.

Once your directive compiles, you can do something like element.html() to get the result — SoluableNonagon
– SoluableNonagon, Commented Jul 29, 2014 at 16:50

SoluableNonagon · Accepted Answer · 2014-07-29 16:59:28Z

1

Not sure if this helps:

app.directive('yourDirective', function ($interval) {

    var linker = function(scope, element, attrs) {

        var contents = element.html(); // this gets element HTML, initial HTML
        var currentContents = element.html();
        function updateContents() {
            currentContents = element.html();
            if(currentContents.length > contents.length)
                console.log('contents changed');
        }

        var interval = $interval(reportChange, 1000);

    }

});

edited Jul 29, 2014 at 16:59

answered Jul 29, 2014 at 16:52

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SoluableNonagon Over a year ago

as for a third party javascript running and inserting things into the DOM, you might just have to create an interval and have it report changes every few seconds

SoluableNonagon Over a year ago

if you expect changes to variables on the scope in the directive, you can create a scope.$watch function to report the changes in html and see if something has been inserted

Collectives™ on Stack Overflow

Get the HTML output from an Angular template in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related