Compiling string htmlusing angular compile not working having ng-repeat in it

Question

Sorry for bad question format before. Changing this now

I have a html string which uses the ngrepeat to render the required div..

 var templateHTML = "<div ng-repeat='entity in createCtrl.finalCCList'>\
                         <span>{{entity.name}}</span>\
                     </div>";

Here "createCtrl.finalCCList" has list of entity object which has name and id properties in it. Now when I try to compile this using -

var compiledTemplateHTML = $compile(templateHTML)($scope);
            if (compiledTemplateHTML && compiledTemplateHTML[0]) {
                return compiledTemplateHTML[0].outerHTML;
            }
            else {
                return "";
            }

I get nothing. Whereas i checked and $scope.createCtrl.finalCCList does have the required values.

Am I missing anything here.

Some code would be really appreciated in order to help you :) What you have done so far? What's your directive code? and html? How you use the directive? — lealceldeiro
– lealceldeiro, Commented Feb 23, 2017 at 17:05
it's still not really clear what you are trying to do here. First of all, why are you trying to use $compile? there are very few reasons to do this, and almost always a better way to structure your code. Secondly, I don't think that $compile returns an array.... — Claies
– Claies, Commented Feb 24, 2017 at 11:03

OLDRomeo · Accepted Answer · 2017-02-24 16:34:19Z

0

Ok. After lot of research I figured issue was the DOM rendered by ng-repeat inside the string html after compiles takes time and I am assigning it before it complete. If i uses the assignment in timeout it works fine.

So instead of this-

var compiledTemplateHTML = $compile(templateHTML)($scope);
        if (compiledTemplateHTML && compiledTemplateHTML[0]) {
            return compiledTemplateHTML[0].outerHTML;
        }
        else {
            return "";
        }

I am not returning but assigning to scope in $timeout

var compiledTemplateHTML = $compile(templateHTML)($scope);
        if (compiledTemplateHTML && compiledTemplateHTML[0]) {
            $timeout(function () {
                createCtrl.isHeaderContent = compiledTemplateHTML[0].outerHTML;
            }, 0);
        }

Thanks.

answered Feb 24, 2017 at 16:34

OLDRomeo

3310 bronze badges

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

Collectives™ on Stack Overflow

Compiling string htmlusing angular compile not working having ng-repeat in it

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related