angularjs: how to handle a popup with a directive so that data comes from controller model

Question

Suppose I have this tag in a template URL, into which HTML coming from the model is injected (HTML is basically <li> bullet points):

<div ng-bind-html="accident.description.impact"></div>

A portion of the model is as follows:

"cause": 

"<ul>\n\
    <li>\n\
    <div><span inline-popover \n\
        popover-html=\"Taper pour ouvrir la vue détaillée\" \n\
        popover-placement=\"bottom\" \n\
        popover-label=\"Larve de taupin\">Larve de taupin</span></div>\n\
    </li>\n\
    <li>Semences en cours de germination</li>\n\
</ul>",

And as you can see, some <li> contains tags that enables for opening a popup.

The issue I have, is that the span is cut off from his attributes, once injected in the partial.

Any idea?

You need to compile the partial before using it, Angular needs to understand that there are directives in the partial. Check into `$compile` on the Angular site. — m.e.conroy, Apr 25 '14 at 13:18

score 1 · Accepted Answer · answered Apr 25 '14 at 13:22

The problem here is: the ng-bind-html does simply output the content of the variable. What you need here is a component, that $compiles the code, to make additional directives work.

<div ng-compile-html="accident.description.impact"></div>

Javascript:

directives.directive("ngCompileHtml", function ($http, $compile)
{
    return {
        restrict: "A",
        scope: {
                "ngCompileHtml": "="            
        },
        link: function (scope, element)
        {
            var template = angular.element(scope.ngCompileHtml);
            $compile(template.contents())(scope);
            $(element).append(template);
        }
    };
});

angularjs: how to handle a popup with a directive so that data comes from controller model

1 Answers1

Linked