Как получить доступ к дочерним элементам в директиве?

Question

[Александр Евгеньевич]

Здравствуйте.
Собственно вопрос : "Как получить доступ к дочерним элементам в директиве ?".
Что есть :

<div class="list" my-directive>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
</div>

angular.module('MyModule').directive('myDirective', function(){
     return {
          restrict : 'A',
          scope : {}, // В рабочей версии нужны будут параметры
          link : function(scope, el){
               console.dir(el.children()); //Возвращает div.directive-div из template
          },
          compile : function(){
               return {
                    pre : function preLink(scope, el){
                         console.dir(el.children()); // Возвращает div.directive-div
                    }
               };
          },
          template : '<div class="directive-div"></div>'
     };
});

А хотелось бы получить список дочерних дивов div.item . Что не так делаю ?

Answer 1

[Сергей Протько]

Ну так вы всю ноду заменяете на темплейт.

Если вы хотите сохранить содержимое - используйте transclude

Comments

[Александр Евгеньевич]

Ок. Т.е. сперва содержимое заменяется на шаблон, а после выполняются все доп. функции ? А что делать, если содержимое нужно обработать ? Т.е. я хочу получить содержимое, произвести с ним некие действия, после чего вывести измененными в шаблоне.

[Сергей Протько]

Александр Евгеньевич: Все очень зависит от того чего вы хотите добиться по итогу:

- содержимое элемента является неотъемлемой его частью: тогда вообще стоит пихать это в шаблон и конфигурить через атрибуты
- ваша директива является оберткой добавляющей к элементам какую-то логику, и вы не хотите делать эти отдельные элементы директивами: - использовать ng-transclude и работать с содержимым в link.
- содержимое влияет на сам темплейт - можно задать в качестве темплейта функцию-фабрику, которой будет передаваться элемент ДО изменения и его атрибуты.
- у вас мега сложная и мега специфичная логика - compile (стоит избегать подобных штук)

Answer 2

[kostik]

angular
  .module('app', [])
  .directive('myDirective', function() {
    return {
      restrict: 'A',
      scope: {},
      link: function(scope, el) {
        var childItems = el[0].querySelectorAll('.item');
        childItems = Array.prototype.slice.call(childItems);

        childItems.forEach(function(node) {
          console.log(node);
        });
      },
      transclude: true,
      template: '<div class="directive-div" ng-transclude></div>'
    };
  });