mdt-column error with Angular 1.6 ~ 1.6.4

[thematho]

Hi, I encounter a problem when running mdDataTable with AngularJS 1.6 or higher the following error appears on console per for each mdt-column declared:

Cannot read property 'length' of undefined
....
 <mdt-column align-rule="left" class="ng-scope ng-isolate-scope">

And the columns are not shown.
Screen:

[SteveZhangF]

same here

[jwebrare]

Changing line 1214 from "clone.html()" to "clone.text()" in file "md-data-table.js" make it works:

//var cellValue = $interpolate(clone.html())($scope.$parent);
var cellValue = $interpolate(clone.text())($scope.$parent);

To solve TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. errors see: #268 (evaldsurtans reply)

[ghost]

This is my solution:
change line 1214
//var cellValue = $interpolate(clone.html())($scope.$parent);
var cellValue = $interpolate(clone[0].data)($scope.$parent);

[tim7004]

I got the same problem here~ Is this project stop updatde?

[aeslinger0]

Rather than change the code to only look for text, another work-around is to wrap your text values in <span> elements so that it becomes HTML.

<mdt-column><span>Some Header</span></mdt-column>

That way, you can still use HTML in the header if you need to.

<mdt-column><strong>Some Other Header</strong></mdt-column>

Edit I take that back. It does work-around the issue, but any other HTML with the span tags appears as text, so I'm not sure what the point of cloning the html is.

[whereisaaron]

I have the same issue with AngularJS 1.7.8 and mdtDataTable 2.2.0 (current latest of both). It previously worked with AngularJS 1.5.x. I guess this issue was never resolved?

angular.js:15567 TypeError: Cannot read property 'length' of undefined
    at $interpolate (angular.js:13883)
    at md-data-table.js:1214
    at publicLinkFn (angular.js:9696)
    at lazyCompilation (angular.js:10111)
    at boundTranscludeFn (angular.js:9875)
    at controllersBoundTransclude (angular.js:10635)
    at Object.link (md-data-table.js:1212)
    at angular.js:1388
    at angular.js:11260
    at invokeLinkFn (angular.js:11266) "<mdt-column column-definition="Foo" class="ng-scope ng-isolate-scope">"

[whereisaaron]

This comment is consistent with what I am seeing. They suggest it is a side-bug that occurs when full jQuery is not present, and jqLite has trouble with the interpolation. I couldn't get this to fix it for me though.

[whereisaaron]

Adding a span tag around the column title does work around this bug as @aeslinger0 identified. I do not have HTML inside the 'span' tags so I guess that is a workaround enough for me. Unsatisfying though 😒

<mdt-column column-definition="Lots of Foo"><span>Foo</span></mdt-column>