search

iamisti / mdDataTable

Angular data table complete implementation of google material design based on Angular Material components.
MIT License
524 stars 132 forks source link

mdt-column error with Angular 1.6 ~ 1.6.4 #315

Open thematho opened 7 years ago

thematho commented 7 years ago

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: mddatatables error

SteveZhangF commented 7 years ago

same here

jwebrare commented 7 years ago

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: https://github.com/iamisti/mdDataTable/issues/268 (evaldsurtans reply)

ghost commented 7 years ago

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

tim7004 commented 6 years ago

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

aeslinger0 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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>