angularjs - Angular: append html in dom element -
i need write directive append html in div
here want append html 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 angular function html 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
$scope.invoice_html_template = $scope.invoicetemplate.invoice_html_template;
but not proper way solve this.
i return json server, how can append html in #invoice_template_preview
updated directive watch scope variable. when changes template html changed whatever in 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 can used:
<div id="invoice_template_preview"> <custom-directive></custom-directive> </div>
you should using $sce when getting hold of html. see sce
request.success(function (data) { $scope.invoicetemplate = $sce.trustashtml(data.result.invoice_html_template);
Comments
Post a Comment