$compile return html in object

Question

so im calling a html template and want to bind the data with angular, so i get the data to bind, i get the html, when i try to compile it will return all the html binded but in (i think) object, what can i do to make it html.

This is the code

$.get("file.html", function(partial){

        var scope = $rootScope.$new();
        scope.data = result;

        var el = angular.element(partial);

        var compiled = $compile(el)(scope);
        var finalHtml = el[0];


        $timeout(function(){
            var calendar = window.open();
            calendar.document.write(finalHtml);
            calendar.focus();
            calendar.print();
        });
    });

I already try .html .toString String() nothing worked

Thank you in Advance

Why are you using jQuery to load a template? Use angular methods if you want to use angular. Where is this code from? $compile is only ever needed in own directives. — Kevin Dreßler
– Kevin Dreßler, Commented Sep 24, 2015 at 13:39
@ Kevin Dreßler thank you for your reply, the result is just html but behave like object — João Reis
– João Reis, Commented Sep 24, 2015 at 13:40

JoseM · Accepted Answer · 2015-09-24 16:59:09Z

4

Your compiled variable is an angular jQuery or jqlite element that can be inserted into your document. If you want to get the html for it, you can use use the outerHTML attribute on the underlying node (you get the underlying node by grabbing the first array element compiled[0]) - https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

var compiled = $compile(el)(scope);
// scope.$digest() // only call if not within an angular $digest already
$timeout(function() {
  var finalHtml = compiled[0].outerHTML;
  ...
}

According to the documentation "After linking the view is not updated until after a call to $digest which typically is done by Angular automatically." so you either have to manually call scope.$digest() or actually use one the angular API to do the request using either $http or preferably using $templateRequest like @ThinkingMedia suggested. After the angular $digest has run, then you can access the updated view.

I created a plunker here that shows how it all works properly using just the AngularJS api: http://plnkr.co/edit/rFcfgB3FWhsfyySfr0rU?p=preview

I also changed how the popup is opened a bit to deal with the security implication of doing popups.

edited Sep 24, 2015 at 16:59

answered Sep 24, 2015 at 13:43

JoseM

4,3022 gold badges26 silver badges35 bronze badges

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

1 Comment

JoseM Over a year ago

@JoãoReis I updated my answer to correct my mistake, use ThinkingMedia's suggestion, and provide a working example

Collectives™ on Stack Overflow

$compile return html in object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related