Angularjs HTML compilation in Controller

Question

I am facing a small problem during the compilation of html code in angularjs. Here is the brief description of my problem :

$scope.report= reportdata;

reportdata is the html code that contains angularcontents like : {{name}} , {{firstname}} etc.

so, I am searching for a function that can compile the above html in my controller just like this :

$scope.compiledReportdata = function() {
      $scope.compildeHtml = somefunction(reportdata);
 }

Is there any function that can do the trick for me , Please suggest.

This is what i have tried i works for HTML but not for Controller

angular.module('myapp')
.directive('dynamic', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, ele, attrs) {
            ele.bind('blur', function () {
                scope.$apply(attrs.uiBlur);
                debugger
            });
            scope.$watch(attrs.dynamic, function (html) {
                ele.html(html);
                var data1 = ele.html(html);
                var data2 = $compile(ele.contents())(scope);
                $compile(ele.contents())(scope);
            });
        }
    };
});

downvotter please comment – Nilesh Gajare May 22 '14 at 07:08 — Nilesh Gajare, May 22 '14 at 07:08

score 1 · Accepted Answer · answered May 20 '14 at 06:22

You can use the $interpolate service in the controller to interpolate the string...

var app = angular.module('app', ['ngSanitize']);

app.controller('controller', function ($scope, $interpolate) {
    $scope.name = 'Costanza';
    $scope.firstname = 'George';
    $scope.report = '<strong>{{name}}</strong> , {{firstname}}';
    $scope.compiledReportdata = function () {
        return $interpolate($scope.report)($scope);
    };
});

And you can use ngBindHtml with ngSanitize to display it...

<div ng-app="app" ng-controller="controller">
    <div ng-bind-html="compiledReportdata()"></div>
</div>

JSFiddle

Angularjs HTML compilation in Controller

1 Answers1