動的に生成されたDOMにAngularカスタムディレクティブを追加しますか？

Question

"Treant.js"というJavaScriptライブラリを使用して、ツリー構造を動的に生成しています。

ツリー構造の原因となるDOM要素は、Treant.jsライブラリによってSVGとして動的に生成されるため、これらの要素にはまったく直接アクセスできません。ここで

は、新しいデータがフォーム経由で追加されるたびにコードのこのブロックは木のDOMに追加されるHTMLは

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

のように見えるものです。

ここでは、ノードがクラスのdivに "ng-class"ディレクティブを追加するためのコードを示します。クロムで開発者ツールを見ると

は

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

、私は、カスタム属性「NG-クラスは」各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>