添加"A"指令到父节点并执行

Question

我是 Angular.js 的新手，我遇到了一个问题。

我想集成此插件 (https://github.com/pratyushmittal/angular-dragtable) 以便能够在我的 table 中拖动列。
整个table就是一个指令。每个 <th> 也由指令呈现。

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

根据插件文档，我需要将 draggable 指令设置为 table。如果我手动设置它，它不会正确地抓取我的列，因为该列在那个时候没有呈现，而且这是行不通的。在 my-column 指令中，我正在等待最后一个 < th >

.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');
        });
    }
  }
}])

当最后一个渲染时，我转到 table 并设置此指令。可以肯定的是，它很愚蠢并且不起作用。我还阅读了有关 $compile 的内容，但我需要将属性指令添加到我的 DOM.

中已经存在的 table

也许我走错了路，不明白这样做的概念，但你明白了吗？我怎样才能做到这一点？

Answer 1

问题是 angular-dragtable 并不期望 table 列是动态的。而且我认为这是合乎逻辑的假设 - 在大多数情况下 table rows 将是动态的（这对于 dragtable 是可以的），但列通常是静态的。

解决这个问题的方法是在 dragtable 中添加一个特殊事件，以在创建列时要求它重新初始化，这是我对 dragtable 所做的修改（请参阅下面的 link 完整来源）：

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。

添加"A"指令到父节点并执行

Add "A"-directive to parent node and execute

javascript

html-table

draggable

angularjs

angular-directive