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>

根据插件文档，我需要将 draggable 指令设置为table。如果我手动设置它，它不会正确地抓取我的列，因为此时不会呈现此列，这样做不起作用。在 my-column 指令中，我等待最后＆lt; 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');
        });
    }
  }
}])

当最后一次渲染时，我会去我的桌子并设置这个指令。肯定是愚蠢的，不起作用。我还阅读了$compile，但我需要在我的DOM中已经存在的表中添加attribute-directive。

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

Answer 1

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

解决方法是向dragtable添加一个特殊事件，要求它在创建列时重新初始化，这是我对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。

添加＆＃34; A＆＃34; -directive到父节点并执行

1 个答案: