添加一個Angular自定義指令到動態生成的DOM？

Question

我正在使用名爲「Treant.js」的JavaScript庫來動態生成樹結構。

由於負責樹結構的DOM元素由Treant.js庫動態生成爲SVG，因此我根本沒有直接訪問這些元素的權限。

下面是HTML的樣子

<div class="node nodeBranches> 
    <p class="node-name>TEXT</p> 
</div> 

代碼的此塊被添加到DOM樹每當一個新的數據通過形式加入。

這裏是我想出來的代碼，以便將「ng-class」指令添加到其類爲節點的div中。

var target = angular.element(".nodeBranches"); 
for (var i = 0; i < target.length; i++) { 
    target.eq(i).attr("ng-class", "changeClass()"); 
} 

望着開發商對鉻的工具，我看到自定義屬性「納克級」被添加到每個div.node，但功能是不存在的。

同樣的事情也發生在「ng-click」屬性上。我可以在代碼中看到自定義指令，但它不起作用。

我該如何使用AngularJS進行這項工作？

Answer 1

由$compile。 Document here。

還有一個例子，幫助它工作。

angular.module('app', []) 
 
    .controller('appCtrl', function($scope) { 
 

 
    }) 
 
    .directive('ngAddClass', function($compile) { 
 
    return { 
 
     restirct: 'AE', 
 
     link: function(scope, ele, attrs) { 
 

 
     scope.changeClass = function() { 
 
      console.info('red'); 
 
      return 'red'; 
 
     } 
 

 
     var target = angular.element(".nodeBranches"); 
 
     for (var i = 0; i < target.length; i++) { 
 
      target.eq(i).attr("ng-class", "changeClass()"); 
 
      $compile(target)(scope); 
 
     } 
 
     } 
 
    } 
 
    });

.red { 
 
    color: red; 
 
}

<script src="//cdn.bootcss.com/jquery/2.0.0/jquery.js"></script> 
 
<script src="//cdn.bootcss.com/angular.js/1.4.7/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="appCtrl"> 
 
    <div ng-add-class> 
 
     <div class="node nodeBranches"> 
 
     <p class=" node-name">TEXT</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>