Generate HTML string from AngularJS template string

Question

I have angularjs template as a string including "ng-repeat" and other directives. I want to compile it in the controller to produce the result HTML as string.

Example on what I want to apply in Angular:

Input:
-------
var template = '<div ng-repeat="item in items">{{item.data}}</div>';

Output:
--------
var result = '<div>1</div><div>2</div><div>3</div><div>4</div>';

I want this to be done in the controller I've and I tried the following:

var template = '<div ng-repeat="item in items">{{item.data}}</div>';
var linkFunction = $compile(template);
var result = linkFunction($scope);

console.log(result); // prints the template itself!

Thanks!

Fordio · Accepted Answer · 2014-10-16 07:18:04Z

8

Give this a whirl:

var template = angular.element('<div ng-repeat="item in items">{{item.data}}</div>');
var linkFunction = $compile(template);
var result = linkFunction($scope);
$scope.$apply();

console.log(template.html());

edited Oct 16, 2014 at 7:18

answered Oct 15, 2014 at 15:39

Fordio

3,8802 gold badges16 silver badges18 bronze badges

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

3 Comments

Kareem Elshahawy Over a year ago

It throws "Error: $apply already in progress". I'm using Angular 1.0.8

Fordio Over a year ago

Try changing "$scope.$digest();" to "$scope.$apply();" - see my edit.

buggy1985 Over a year ago

In my application it throws: $rootScope:inprog "Action Already In Progress": $digest already in progress (using ng 1.5.5)

Ali Habibzadeh · Accepted Answer · 2014-10-15 15:41:27Z

For this purpose I made myself a directive couple of projects ago:

angular.module('myApp')

.directive('ngHtmlCompile', ["$compile", function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.ngHtmlCompile, function (newValue, oldValue) {
                element.html(newValue);
                $compile(element.contents())(scope);
            });
        }
    }
}]);

and then for example:

<div ng-html-compile='<div ng-repeat="item in items">{{item.data}}</div>'></div>

or even the string can be dynamic:

<div ng-repeat="item in items" ng-html-compile="item.template">
</div>

Collectives™ on Stack Overflow

Generate HTML string from AngularJS template string

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related