javascript - AngularJs 从列表动态创建指令

Question

我实际上试图在用户点击列表时在我的 dom 中包含一些指令。

这是列表:

 $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}
        ];

我将其显示在 ng-repeat 列表中，但我无法使用简单的:

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

事实上，它们在 DOM 中显示 HTML 标签，但内容并未加载。

这是有关我的应用程序的示例指令:

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

注意:如果我在列表之外使用我的指令，它就像一个魅力。感谢您的提前

这是 HTML 内容:

<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>

你能帮我吗？

编辑:

我尝试了一些编译，但使用 templateUrl 似乎有点不同:-o

这是我的新尝试:

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);
                });
            }
        };
    });

感谢您的提前

Answer 1

1/class='user-connecte' 调用您的指令无效，您应该将其用作属性，如下所示:

<div user-connecte></div>

2/ng-bind-html 不足以解释 Angular 属性(如对指令的调用，如您的情况)；你需要$compile它。对于这一点，这个topic将帮助您编译模板。 因此，请使用作者给出的“dynamic”指令作为“运行时编译器”，而无需修改指令“userConnecte”。 第二次，在 ng-repeat 中调用“运行时编译器”，如下所示:

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

然后，编译器将解释字符串中的属性 user-connecte，并且将调用您的指令 userConnecte，加载您的 templateUrl (这是您最初的需求)。