我正在使用名为“Treant.js”的 JavaScript 库来动态生成树结构。
由于负责树结构的 DOM 元素是由 Treant.js 库动态生成为 SVG 的,因此我根本无法直接访问这些元素。
这是 HTML 的样子
<div class="node nodeBranches>
<p class="node-name>TEXT</p>
</div>
每当通过表单添加新数据时,该代码块就会添加到树 DOM 中。
这是我想出的代码,用于将“ng-class”指令添加到类为node的div中。
var target = angular.element(".nodeBranches");
for (var i = 0; i < target.length; i++) {
target.eq(i).attr("ng-class", "changeClass()");
}
查看chrome中的开发者工具,发现每个div.node都添加了自定义属性“ng-class”,但功能并不存在。
“ng-click”属性也会发生同样的情况。我可以在代码中看到自定义指令,但它不起作用。
如何使用 AngularJS 完成这项工作?
最佳答案
通过$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>
关于javascript - 添加 Angular 自定义指令到动态生成的 DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37222004/