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

你能帮助我吗？

已编辑：

我尝试使用compile编译，但似乎使用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不足以解释角度属性（比如调用指令，就像你的情况一样）;你需要$compile它。对于这一点，这个topic将帮助您编译模板。所以使用＆＃39; dynamic＆＃39;由作者作为＆＃34;运行时编译器＆＃34;给出的指令，而不修改您的指令＆＃39; userConnecte＆＃39;。第二次，调用这个＆＃34;运行时编译器＆＃34;在你的ng-repeat中像这样：

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

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

AngularJs从列表中动态创建指令

1 个答案: