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, Apr 03 '15 at 13:53
The templateUrl of my directive is not loaded in the HTML. In fact, I see only the
but not his content — mfrachet, Apr 03 '15 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, Apr 03 '15 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, Apr 03 '15 at 15:03

score 1 · Accepted Answer · edited May 23 '17 at 10:24

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 '17 at 10:24

Community

1
1

answered Apr 03 '15 at 13:58

bviale

5,245
3
28
48

Ok so i need the code of your html where you put the ng-repeat – bviale Apr 03 '15 at 14:00
Editted another time :-) – mfrachet Apr 03 '15 at 14:27
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 – bviale Apr 03 '15 at 14:43

AngularJs create directive dynamically from a list

1 Answers1