Angular: append html in dom element

Question

I need to write directive to append html in div

Here i want to append html which i get it from server usinh $http post request

<div id="invoice_template_preview" 
    ng-bind-html-unsafe="invoice_html_template"
    class="span6" 
    style="background: rgba(242, 230, 205, 0.95);margin: -100px 0 0 0;border: 1px solid #ddd; height: auto;padding: 18px;position: relative;width: 50% !important;">
</div>

This is my angular function to get html from db

$scope.getInvoiceTemplate = function() {

    $scope.invoiceTemplate = [];


    var request = $http({
        method: "post",
        url: "/c_make_invoice/",
        data: {
            action: 'getInvoiceTemplate',
            id:$scope.our_company_id
        },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });

    request.success(function (data) {
        $scope.invoiceTemplate = data.result;
        $scope.invoice_html_template = $scope.invoiceTemplate.invoice_html_template;
        $scope.invoice_num_format = $scope.invoiceTemplate.invoice_num_format;
    });
};

I try this

$scope.invoice_html_template = $scope.invoiceTemplate.invoice_html_template;

but its not a proper way to solve this.

I return json from server, how i can append that html in #invoice_template_preview

i dont have any template I just want to put my html code from database which i recive on client side and append id in invoice_template_preview div. — Earphan
– Earphan, Commented Apr 29, 2015 at 12:05

Dominic Scanlan · Accepted Answer · 2015-04-29 13:04:16Z

Updated directive to watch the scope variable. When it changes the template html is changed to whatever is in the variable.

.directive('CustomDirective', function(){
    return {
    restrict:  'E',
    link: function(scope, element, attrs){
        scope.$watch('invoice_html_template', function(){
            var template = scope.invoice_html_template;
            element.html(template);
            $compile(element.contents())(scope);
        });
    },
    template: '<div>{{$scope.invoiceTemplate}}</div>'
});

and it can be used:

<div id="invoice_template_preview">
    <custom-directive></custom-directive>
</div>

You should also be using $sce when getting hold of the HTML. see sce

request.success(function (data) {
    $scope.invoiceTemplate = $sce.trustAsHtml(data.result.invoice_html_template);

i calll this function $scope.getInvoiceTemplate in myController, acctually i select which html template i want from in dropdawn and sent it to server, here You suggest me to call same function in directive.

Earphan · Accepted Answer · 2015-04-30 11:49:44Z

0

Whan i try $compile I get that $compile is not defined, I fixed that whan I add $compile param in controller initialization.

After that I simple add this code

$('#invoice_template_preview').html($compile($scope.invoiceTemplate.invoice_html_template)($scope));

answered Apr 30, 2015 at 11:49

Earphan

3741 gold badge4 silver badges14 bronze badges

1 Comment

Muneem Habib Over a year ago

can you be more specific? I got stuck in this issue

Collectives™ on Stack Overflow

Angular: append html in dom element

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related