javascript - AngularJS - How to get processed HTML output from $compile? -
i have following function fetching custom html template , passing values scope generate 'report table'. because template not visible user processed output directly sent function used $compile function.
it seems values passed $scope processed correctly not able pure html result.
i tried way:
var templateurl = $sce.gettrustedresourceurl('report.html'); $templaterequest(templateurl).then(function(template) { $scope.rows = reportdata; var comptest = $compile(template)($scope); console.log(comptest); //it returns lot of values not html ouput of processed template }, function() { // error has occurred }); many advice.
results following:
html content:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>report</title> </head> <body> <table> <thead> <td> </td> <td> breakfast </td> <td> lunch </td> <td> dinner </td> <td> snack </td> </thead> <tbody> <tr ng-repeat="row in rows"> <td>test</td> <td>40</td> <td>20</td> <td>30</td> <td>10</td> </tr> </tbody> </table> </body> </html>
$compile return function executed scope in turn returns jqlite wrapped dom object. can use outerhtml template string
or
you can use $interpolate shown below
demo
angular.module('myapp', []); angular .module('myapp') .controller('mycontroller', mycontroller); function mycontroller($scope, $compile, $interpolate) { var template = '<a ng-click="handler()">click handler</a>'; this.tmpl = $compile(template)($scope)[0].outerhtml; this.tmplint = $interpolate(template)($scope); } <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="myapp"> <div ng-controller="mycontroller mc"> <p><b>using $compile along outerhtml </b>{{mc.tmpl}}</p> <p><b>using $interpolate </b>{{mc.tmplint}}</p> </div> </div> 
Comments
Post a Comment