向动态生成的 DOM 添加 Angular 自定义指令？答案

【问题标题】：Adding an Angular custom directive to dynamically generated DOM?向动态生成的 DOM 添加 Angular 自定义指令？
【发布时间】：2016-09-10 08:37:08
【问题描述】：

我正在使用一个名为“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()");
}

在chrome中查看开发者工具，看到每个div.node都添加了自定义属性“ng-class”，但是功能没有。

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

如何使用 AngularJS 完成这项工作？

【问题讨论】：

$compile(target)

标签： javascript jquery html angularjs svg

【解决方案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>

【讨论】：