添加一个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>