Директива AngularJS jqLite конвертирует.contents() в.children()

Рассмотрим этот работающий пример:

var app=angular.module('myapp', [])
.directive('mydct', function () {
  return {
    restrict:'EA',
    transclude:true,
    template:"<div>Template</div>",
    replace:true,
    scope:true,
    link: function (scope, elm, attrs,ctrl,transcludeFn) {
      transcludeFn( function( clone, scope ) {
        console.log(clone[0]);
        console.log(clone[1]);
        console.log(clone[2]);
        console.log(clone[3]);
        //clone[3].attr('id');
      });
    }
  };
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='myapp'>
  <mydct>
    <div id='one'>This is one</div>
    <span id='two'>This is two</span>
  </mydct>
</body>

Как вы можете видеть, параметр clone в transcludeFunction вернет объект как.contents(). Это будет включать текстовые узлы. У меня есть два вопроса:

  1. Есть ли способ конвертировать этот массив содержимого в массив потомков, тем самым пропуская текстовые узлы?
  2. Как видите, я получу текстовое содержимое при доступе к элементам в массиве, что я должен сделать, чтобы получить их как элементы и иметь возможность получить атрибут?
Источник

1 ответ

Решение
transcludeFn( function( clone, scope ) {
    var els, i;

    // convert to a normal array
    els = Array.prototype.slice.call(clone);

    // exclude text nodes
    els = els.filter(function (element) {
        return element.nodeType !== Node.TEXT_NODE;
    });

    // wrap each DOMElement in a jqLite object
    for (i = 0; i < els.length; i++) {
        els[i] = angular.element(els[i]);
    }

    for (i = 0; i < els.length; i++) {
        // do what you like with each clone's attribute
        console.log(els[i].attr('id'));
    }
});

Это немного многословно, чтобы подчеркнуть шаги, которые нужно пройти, но не стесняйтесь упрощать или сокращать код там, где это необходимо.

Источник
Другие вопросы по тегам