AngularJs從列表中動態創建指令

我實際上試圖從用戶點擊列表中包含一些指令。AngularJs從列表中動態創建指令

這裏的名單：

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

感謝提前

來源

2015-04-03 mfrachet

'內容未加載'您正在談論哪些內容？ – bviale 2015-04-03 13:53:49

我的指令的templateUrl沒有加載到HTML中。實際上，我只看到

，但看不到他的內容 – mfrachet 2015-04-03 13:54:27

我不確定我是否明白爲什麼「不能使用ng-bind-html」或「ng-bind-html-unsafe」？任何時候有人說不可能使用用於他們問題目的的內置函數，它通常意味着還有其他事情正在發生，他們沒有分享。 – Claies 2015-04-03 14:11:50

1/class='user-connecte'無法調用您的指令，您應該將其用作屬性來代替，如下所示：

<div user-connecte></div>

2/ng-bind-html是不足以解釋角度屬性（如調用一個指令，如你的情況）;你需要$compile吧。對於這一點，這topic將幫助你編譯你的模板。因此，使用作者給出的'動態'指令作爲「運行時編譯器」，而不修改您的指令'userConnecte'。在第二時間，稱之爲「運行時編譯」在NG-重複這樣的：

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

然後，屬性用戶connecte在您的字符串將被解釋由於編譯器，你的指令userConnecte會被調用，加載你的templateUrl（這是你最初的需要）。

來源

2015-04-03 13:58:07 bviale

它不起作用witht他的控制器列表項 – mfrachet 2015-04-03 13:59:26

裏面好吧，所以我需要你的HTML代碼，你把ng-repeat – bviale 2015-04-03 14:00:46

我編輯我的文章:-) – mfrachet 2015-04-03 14:02:59

AngularJs從列表中動態創建指令

回答

相關問題