在動態生成的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>