2016-04-27 6 views
0

Я работаю с AngularJS в течение нескольких месяцев. Сегодня мне нужно создать директиву, которая поможет мне добавить заголовок исправления в таблицу. Все директивы, которые я нашел, были недостаточно хороши из-за того, как они обрабатывают размер столбцов (я все еще открыт для предложений).AngularJS: Как получить доступ к сгенерированным данным из директивы?

Мы используем «старую» функцию, созданную с помощью jQuery, и я пытаюсь преобразовать ее в директиву. Цель состоит в том, чтобы клонировать таблицу (или заголовок таблицы) и работать с функциями hide/show и ее позицией, чтобы получить хороший результат.

Моей проблема: заголовок моей таблицы динамичен с генерируемыми столбцами:

<table> 
     <thead> 
      <tr> 
        <th></th> // true th elements, used for styling my table 
        <th></th> 
        <th class='text-center' ng-repeat="thing in things"> 
         {{thing.label}} 
        </th> 
      </tr> 
     </thead> 
     <tbody> 
      // my tbody 
    </tbody> 
</table> 

Я пытаюсь получить <th> элемент в моих директивах с чем-то вроде этого:

angular.forEach(elem.querySelectorAll('tr:first-child th'), function (thElem, i) { 
     console.log(thElem) 
     // do stuff here 
    } 
}); 

Но Я просто получаю два первых <th>, которые являются «истинными» элементами в моем коде. Все остальные, генерируемые ng-repeat, игнорируются. Или не указывается в моей директиве.

Я просматриваю атрибут transclude, но я не мог найти ничего, что сработает. Можете ли вы мне помочь с некоторой точностью?

EDIT: Вот начало моей директивы:

myApp.directive('fixMe', function ($window) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      angular.forEach(element.querySelectorAll('th'), function (thElem, i) { 
      console.log(thElem); 
      var columnWidth = thElem.offsetWidth; 
      thElem.style.width = columnWidth + 'px'; 
     }); 

     } 
    }; 
}) 
+0

Я не уверен, если я понимаю - вы хотите взять все внутри '' и поместить его внутрь директивы? Не можете ли вы просто ввести код в шаблон директивы? – Ozrix

+0

Моя цель - иметь директиву, которая будет работать с любой таблицей (независимо от количества строк, столбцов и т. Д.). Могу ли я сделать это с помощью шаблона? – Thib

ответ

0

с момента, используя нг-повтора, вы можете добавить уникальный идентификатор, а затем использовать ванильный JS, чтобы получить элемент.

зависит от того, что вы хотите сделать, если вы хотите обрабатывать изменения при нажатии, вы также можете использовать ng-click на th элементах, и таким образом вы можете получить элемент, используя функцию as: ng-click = " йоЗотеЬЫпд ($ событие)».

<table> 
     <thead> 
      <tr> 
        <th></th> // true th elements, used for styling my table 
        <th></th> 
        <th class='text-center' ng-repeat="thing in things track by $index" id="th_{{thing.id}}"> 
         {{thing.label}} 
        </th> 
      </tr> 
     </thead> 
     <tbody> 
      // my tbody 
    </tbody> 
</table> 

angular.forEach(things, function (thing) { 
     var theElm = document.getElementById('th_'+thing.id); 
     console.log(thElem) 
     // do stuff here 
    } 
}); 
+0

Как я уже говорил в предыдущем комментарии, моя цель - иметь директиву, которая будет работать для любой таблицы. Я не могу полагаться на сферу, не так ли? – Thib

+0

с использованием ng-repeat делает его динамическим, так что он работает с любой таблицей. ng-repeat просто дублирует элемент до конца массива. поэтому, если у вас есть 3 элемента в массиве, это создаст тэги 3 с вещью. Вы можете сделать то же самое для тела, так что у вас тоже есть динамические строки. – fayzaan

0

Я собираюсь принять диких угадать здесь, так как я до сих пор не уверен, если это то, что вы хотите, но для того, чтобы получить любой набор элементов, вы могли бы использовать: включение

var myApp = angular.module('myApp',[]); 

myApp.directive('tableCollector', function() { 
    return { 
    restrict: "A", 
    transclude: true, 
    link: function(scope, element, attrs, ctrl, $transclude) { 
     $transclude(scope, function(clone){ 
      ... // do something with the element collection 
     }); 
    } 
    } 
}); 

Demo (проверьте журнал консоли, динамически включены <th> элементы находятся в tr.scope.cells объекта)

Смежные вопросы