在动态生成的DOM中添加Angular自定义指令？

Question

我正在使用一个名为“ Treant.js”的JavaScript库来动态生成树结构。

因为负责树结构的DOM元素是由Treant.js库动态生成为SVG的，所以我根本无法直接访问这些元素。

这是HTML的样子

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

每当通过表单添加新数据时，此代码块就会添加到树DOM中。

这是我想出的代码，用于向类为node的div添加“ ng-class”指令。

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

查看chrome中的开发人员工具，我看到自定义属性“ ng-class”已添加到每个div.node，但是功能不存在。

“ ng-click”属性也会发生相同的情况。 我可以在代码中看到自定义指令，但是它不起作用。

如何使用AngularJS进行这项工作？

Answer 1

通过$compile 。 在这里记录 。

举个例子，帮助它工作。

 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>