AngularJs从列表中动态创建指令

AngularJs create directive dynamically from a list

本文关键字：创建 指令 动态 列表 AngularJs      更新时间：2023-09-26

实际上，我正试图在我的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重复列表中，我不能使用简单的：

ng绑定html或ng绑定html不安全

事实上，它们在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);
                });
            }
        };
    });

感谢提前

1/class='user-connecte'不能调用指令，您应该将其用作属性，如下所示：

<div user-connecte></div>

2/ng-bind-html不足以解释角度属性（如对指令的调用，如您的情况）；您需要$compile它。为此，本主题将帮助您编译模板。因此，使用作者给出的"dynamic"指令作为"运行时编译器"，而不修改指令"userConnecte"。第二次，在你的ng重复中调用这个"运行时编译器"，如下所示：

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

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

相关文章：