Добавление пользовательской директивы Angular для динамически генерируемого DOM?

Question

Добавление пользовательской директивы Angular для динамически генерируемого DOM?

0

Я использую библиотеку JavaScript под названием "Treant.js" для динамического создания древовидной структуры.

Поскольку элементы DOM, ответственные за древовидную структуру, динамически генерируются как SVG библиотекой Treant.js, у меня нет прямого доступа к этим элементам вообще.

Вот как выглядит 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()");
}

Глядя на инструмент разработчика в хром, я вижу, что пользовательский атрибут "ng-class" добавляется к каждому div.node, но функциональности там нет.

То же самое происходит и для атрибута "ng-click". Я могу видеть пользовательскую директиву в коде, но она не работает.

Как я могу сделать эту работу с помощью AngularJS?

oosniss 14 май 2016, в 05:23

Источник

0

$compile(target)
YOU 14 май 2016, в 02:57

Теги:

javascript

jquery

html

angularjs

svg

1 ответ

Ещё вопросы

Yin Gang · Accepted Answer · 2016-05-14T02-02-00.000Z

По $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>