AngularJs create directive dynamically from a list

Question

I m actually trying to include some directives in my dom from a user click on a list.

Here's the list :

 $scope.listModules = [
            {libelle: "Utilisateurs connectés", template: "<div class='user-connecte'></div>", drag: true},
            {libelle: "utilisateur temps de passe en zone", template: "<div class='user-graph-temps-attente'></div>", drag: true},
            {libelle: "Nombre d'anomalies", template: "<div class='nombre-anomalie'></div>", drag: true},
            {libelle: "Tableau de prestations", template: "<div class='prestation-tableau'></div>"},
            {libelle: "Graph de prestations camembert", template: "<div class='prestation-graph-camembert'></div>", drag: true},
            {libelle: "Tableau de traitements", template: "<div class='traitement-tableau'></div>", drag: true},
            {libelle: "Graph de traitement à granularité", template: "<div class='traitement-graph-granularity'></div>", drag: true}
        ];

I display it in a ng-repeat list, and I cant use the simple :

ng-bind-html or ng-bind-html-unsafe

In fact, they display the HTML tag in the DOM, but the content is not loaded.

Here's a sample directive concerning my app :

angular.module('app')
    .directive('userConnecte', function ($compile) {
        return {
            restrict: 'EAC',
            templateUrl: 'tpl/directive/UserConnecteDirective.html'
        };
    });

NB : If I use my directive outside the list, it works like a charm. Thanks for advance

Here's the HTML content :

<div class="col-md-4" style="height:380px;"
                 ng-repeat="currentModule in listeCurrentModule" data-drag="{{currentModule.drag}}"
                 data-jqyoui-options="{revert: 'invalid'}" ng-model="listeCurrentModule"
                 jqyoui-draggable="{index: {{$index}},animate:true}">
                <div ng-bind-html="currentModule.template">
                </div>
            </div>

Can you help me ?

EDITED :

I tried something with compile, but it seems that it's a bit different using templateUrl :-o

here's my new try :

angular.module('app')
    .directive('userConnecte', function ($compile) {
        return {
            restrict: 'EAC',
            templateUrl: 'tpl/directive/UserConnecteDirective.html',
            replace: true,
            link: function (scope, ele, attrs) {
                scope.$watch(attrs.userConnecte, function (html) {
                    ele.html(html);
                    $compile(ele.contents())(scope);
                });
            }
        };
    });

Thanks for advance

'the content is not loaded' which content are you talking about ? — bviale
– bviale, Commented Apr 3, 2015 at 13:53
The templateUrl of my directive is not loaded in the HTML. In fact, I see only the <div class='my-directive'></div> but not his content — mfrachet
– mfrachet, Commented Apr 3, 2015 at 13:54
I'm not sure I understand exactly why you "can't use ng-bind-html or ng-bind-html-unsafe"? any time someone says it's not possible to use the built-in functions meant for the purpose of their question, it usually means there is something else going on that they aren't sharing. — Claies
– Claies, Commented Apr 3, 2015 at 14:11
If you want to use directive such way, you will have to use $compile service in your controller. I mean compile your html from controller. In the directive template, do have any scope dependencies? It would better if you share directive template html as well for telling correctly — Samir Das
– Samir Das, Commented Apr 3, 2015 at 15:03

Community · Accepted Answer · 2017-05-23 10:24:12Z

1

1/ class='user-connecte' is not valid to call your directive, you should use it as an attribute instead, like this :

<div user-connecte></div>

2/ ng-bind-html is not enough to interpret angular attributes (like a call to a directive, like your case) ; you need to $compile it. For this point, this topic will help you to compile your template. So use the 'dynamic' directive given by the author as a "runtime compiler", without modifying your directive 'userConnecte'. In a second time, call this "runtime compiler" in your ng-repeat like this :

<div dynamic="currentModule.template"></div>

Then, the attribute user-connecte in your string will be interpreted thanks to the compiler, and your directive userConnecte will be called, loading your templateUrl (that was your initial need).

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Apr 3, 2015 at 13:58

bviale

5,3933 gold badges30 silver badges48 bronze badges

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

3 Comments

bviale Over a year ago

Ok so i need the code of your html where you put the ng-repeat

mfrachet Over a year ago

Editted another time :-)

bviale Over a year ago

Okay it is a big mess, what I wanted to suggest you was to introduce a new directive able to compile your dynamic html, not to modify your own templating directive. I have edited my answer once again

Collectives™ on Stack Overflow

AngularJs create directive dynamically from a list

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related