使用ng-hide使用colResizable切換表中的列

Question

我創建了一個簡單的指令，該指令利用colResizable插件在呈現后直接在表上激活該插件：

app.directive("columnResizable", this.columnResizable = function($timeout) {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            // Initialize colResizable plugin after DOM
            $timeout(function() {
                element.colResizable({
                    liveDrag:true,
                    postbackSafe: true,
                    partialRefresh: true,
                    minWidth: 100
                });
            });
        }
    }
});

在我需要添加一個功能來隱藏和顯示表中的列之前，該指令可以正常工作。 我使用ng-hide並通過更改localStorage布爾變量來打開或關閉列。 如果我從“顯示全部”狀態開始，這些列將按預期方式隱藏/顯示。 但是拒絕顯示我是否從隱藏狀態開始：

<button class="btn btn-default"
  ng-class="{active: emailHidden}"
  ng-click="emailHidden = !emailHidden">Hide Email</button>

<table column-resizable class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th ng-hide="emailHidden">Email</th>
        </tr>
    </thead>
    <tbody ng-if="!scheduleEntries || scheduleEntries.length == 0">
        <tr>
            <td>Foo Bar</td>
            <td ng-hide="emailHidden">foo@bar.com</td>
        </tr>
    </tbody>
</table>

我用常規的布爾變量創建了一個punker。 如果將$ scope.emailHidden變量更改為開始隱藏，則可以看到單擊該按鈕后將不會顯示“電子郵件”列： http : //plnkr.co/edit/Y20BH2

Answer 1

我最終在指令內為emailHidden變量添加了一個觀察者，更改后，它會重置列寬並重新初始化colResizable插件：

scope.$watch('emailHidden', function(newVal) {
  element.find('th').css('width','auto');
    $timeout(function() {
        element.colResizable({
            liveDrag:true,
            postbackSafe: true,
            partialRefresh: true,
            minWidth: 100
        });
    });
});

更新的插頭

如果有人有更好的解決方案，我將不勝感激。 最好是不涉及$ watch的東西

Answer 2

當$scope.emailHidden值設置為true時，ColResizer將第二列的寬度更新為零。 而且即使在emailHidden標志設置為false之后，此寬度也不會得到更新。 由於在這種情況下第二列沒有任何寬度，因此我們無法在屏幕上看到它。