Добавить «A» -directive к родительскому узлу и выполнить

Question

Я новичок в Angular.js, и я столкнулся с одной проблемой.

Я хочу интегрировать этот плагин (https://github.com/pratyushmittal/angular-dragtable), чтобы иметь возможность перетаскивать столбцы в таблицу.
Весь стол - это директива. Каждый <th> также предоставляет директиву.

<table> 
    <thead> 
     <tr> 
     <th ng-repeat="col in table.columns" my-column></th> 
     </tr> 
    </thead> 
    </table> 

Согласно плагином документации мне нужно установить перемещаемой директиву таблицы. Если я установил его вручную, он не будет правильно брать мои столбцы, потому что в этот момент эти столбцы не отображаются, и это не работает. В моей колонки директивы Я жду последнего < я>

.directive('myColumn', ['$timeout', function($timeout) { 
    return { 
    restrict: 'A', 
    templateUrl: 'templates/column.html', 
    link: function(scope, element, attrs) { 
     if (scope.$last) 
     $timeout(function() { 
      //scope.$emit('lgColumnsRendered'); 
      angular.element(element).closest('table').attr('draggable', 'draggable'); 
     }); 
    } 
    } 
}]) 

И когда посл визуализируюсь я подходя к моему столу и установить эту директиву. Наверняка это глупо и не работает. Я также читал о $compile, но мне нужно добавить директиву атрибутов к уже существующей таблице в моей DOM.

Возможно, я ошибаюсь и не понимаю концепцию этого, но вы поймете идею? Как я могу это сделать?

Answer 1

Проблема заключается в том, что угловое перетаскивание не ожидает, что столбцы таблицы будут динамическими. И я думаю, что это логическое предположение - в большинстве случаев таблица строк будет динамичной (это нормально для dragtable), но столбцы обычно статичны.

Решение этого вопроса заключается в том, чтобы добавить специальное событие к перетаскиванию, чтобы попросить его повторить инициализацию при создании столбцов, вот изменение, которое я сделал для перетаскивания (см. Ссылку на полный источник ниже):

project.directive('draggable', function($window, $document) { 
    function make_draggable(scope, elem) { 
     scope.table = elem[0]; 
     scope.order = []; 
     scope.dragRadius2 = 100; 

     var headers = []; 
     init(); 

     // this is the event we can use to re-initialize dragtable 
     scope.$on('dragtable.reinit', function() { 
      init(); 
     }); 

     function init() { 
      headers = scope.table.tHead.rows[0].cells; 
      for (var i = 0; i < headers.length; i++) { 
       scope.order.push(i); 
       headers[i].onmousedown = dragStart; 
      } 
     } 

     function dragStart($event) { 

Теперь в вашем коде вы можете сделать это:

.directive('myColumn', ['$timeout', '$rootScope', function($timeout, $rootScope) { 
     return { 
     restrict: 'A', 
     templateUrl: 'templates/column.html', 
     link: function(scope, element, attrs) { 
      if (scope.$last) 
      $rootScope.$broadcast('dragtable.reinit'); 
     } 
     } 

Вот full code примера я тестировал вопрос о.