动态添加列到 table（使用 colResizable 插件）

Question

我正在使用插件 colresizable 来控制列宽。我想做的是能够动态添加列。我试过了：

<body ng-controller='myCtrl'>
  <table style="width: 100%;height:300px" col-resizeable>
    <tr>
      <td  ng-repeat='column in columns track by $index' ng-style="{'background':column}">content</td>
    </tr>
  </table>
 <button type='button' ng-click="addColumn()">Add</button>
</body>

这是一个plunker（添加按钮应该是添加一个绿色的列）

http://plnkr.co/edit/8rfoYoQVZ3fRk53192TX?p=preview

没有成功。谁能告诉我哪里做错了？

编辑： 这是我添加列的方式...

$scope.addColumn = function(){
   $scope.columns.push('green');
}

Answer 1

你需要 $timeout 的原因是什么？如果您将其删除，它将起作用

myApp.directive('colResizeable', function($interval) {
return {
    restrict: 'A',
    link: function(scope, elem) {

    elem.colResizable({
      liveDrag: true,
      gripInnerHtml: "<div class='grip'></div>",
      draggingClass: "dragging",
      onDrag: function() {
        //trigger a resize event, so paren-witdh directive will be updated
        //$(window).trigger('resize');
      }
    });

}
};
});

其他解决方案是观察 "columns" 并在每次更改时禁用并重新启用 colResizable。

http://plnkr.co/edit/elABlMAhV25LSiphEjXk?p=preview

动态添加列到 table（使用 colResizable 插件）

Dynamically add columns to table (with colResizable plugin)

jquery

html-table

angularjs