May not work with ngIf

[daniel-nagy]

This does not work if there is an ng-if directive on the <table> element or the <thead> element. This may be only when a directive in the header requires another directive on the table. For example my data table module.

[jraadt]

It doesn't work if any parent of the table has an ng-if directive. In your demo codepen I just added ng-if="true" to the ng-card element and it no longer works. I've been trying all sorts of things to get it to work, but have been unsuccessful so far.

[jraadt]

When the code was added to fix ng-repeat, you can no longer have the table inside an element with ng-if. Previous versions, like 0.1, work fine with ng-if. It seems the cloning that exists in the compile function makes it work with ng-repeat, but not ng-if. Not sure how to fix this.

[jraadt]

My pull request #15 now allows a table's parent element to have ng-if, but I believe it still doesn't like a ng-if on the actual table. I haven't looked into getting it to work on the table yet, but it's closer now.

[shashwatblack]

A workaround I've found to this issue, is to use ng-include to include the table markup. It's not the prettiest but it works fine.

Say this is your code before

<div ng-if="someCondition">
  <div style="overflow: auto; max-height: 300px;">
    <table>
      <thead fix-head>
        <tr>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="contact in contacts">
          <td>{{contact.name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

You'll now change this to something like,

<div ng-if="someCondition">
  <div style="overflow: auto; max-height: 300px;" ng-include="'some-template-name.html'">
    <script type="text/ng-template" id="some-template-name.html">
      <table>
        <thead fix-head>
          <tr>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="contact in contacts">
            <td>{{contact.name}}</td>
          </tr>
        </tbody>
      </table>
    </script>
  </div>
</div>

Of course, you can have the template anywhere in the file, or even reference a separate file, but I like to keep it right there because I'm doing this just to avoid this ng-if issue.

Can the library be altered to use this as a solution automatically? Again, it wouldn't be the prettiest, but we just want something that works. It's a huge problem that this otherwise fantastic library, doesn't work with something as basic as an ng-if

[ctqctq]

So any suggestions for this? I tried to wrap it in a div with ng-include but it doesnt seems to work either.

[aner-perez]

As a workaround, I had to wrap the table in a div and use ng-hide on the wrapping div. The table is still rendered but not displayed. You can't put the ng-hide on the table itself because the column headers still show up if you do it that way.

[JohnBoyFish]

what's the progress on this?

[SangoYu]

@shashwatblack nice! ng-include works for me.