Error: text is undefined

[hombrew]

I am trying to use the simplest example for a project

<mdt-table
  table-card="{title: 'Nutritions'}" 
  mdt-row="{
    'data': sl.nutritionList,
    'column-keys': ['name', 'calories', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron']
  }">
          <mdt-header-row>
            <mdt-column align-rule="left">Dessert (100g serving)</mdt-column>
            <mdt-column align-rule="right">Calories</mdt-column>
            <mdt-column align-rule="right">Fat (g)</mdt-column>
            <mdt-column align-rule="right">Carbs (g)</mdt-column>
            <mdt-column align-rule="right">Protein (g)</mdt-column>
            <mdt-column align-rule="right">Sodium (mg)</mdt-column>
            <mdt-column align-rule="right">Calcium (%)</mdt-column>
            <mdt-column align-rule="right">Iron (%)</mdt-column>
          </mdt-header-row>
</mdt-table>

where sl.nutritionList is a vm found in this view controller.

The vm data is displayed correctly, but the header is not, also, an error is thrown eight times:

Error: text is undefined
$interpolate@http://localhost:3000/bower_components/angular/angular.js:12716:11
mdtColumnDirective/<.link/<@http://localhost:3000/bower_components/md-data-table/dist/md-data-table.js:1214:37
publicLinkFn@http://localhost:3000/bower_components/angular/angular.js:8742:29
lazyCompilation@http://localhost:3000/bower_components/angular/angular.js:9134:16
boundTranscludeFn@http://localhost:3000/bower_components/angular/angular.js:8921:16
controllersBoundTransclude@http://localhost:3000/bower_components/angular/angular.js:9688:20
mdtColumnDirective/<.link@http://localhost:3000/bower_components/md-data-table/dist/md-data-table.js:1212:17
bind/<@http://localhost:3000/bower_components/angular/angular.js:1291:15
cloneAndAnnotateFn/<@http://localhost:3000/bower_components/angular/angular.js:10243:41
invokeLinkFn@http://localhost:3000/bower_components/angular/angular.js:10249:9
nodeLinkFn@http://localhost:3000/bower_components/angular/angular.js:9638:11
compositeLinkFn@http://localhost:3000/bower_components/angular/angular.js:8878:13
publicLinkFn@http://localhost:3000/bower_components/angular/angular.js:8743:30
lazyCompilation@http://localhost:3000/bower_components/angular/angular.js:9134:16
boundTranscludeFn@http://localhost:3000/bower_components/angular/angular.js:8921:16
controllersBoundTransclude@http://localhost:3000/bower_components/angular/angular.js:9688:20
appendColumns@http://localhost:3000/bower_components/md-data-table/dist/md-data-table.js:1301:21
mdtHeaderRowDirective/<.link@http://localhost:3000/bower_components/md-data-table/dist/md-data-table.js:1298:17
bind/<@http://localhost:3000/bower_components/angular/angular.js:1291:15
invokeLinkFn@http://localhost:3000/bower_components/angular/angular.js:10249:9
nodeLinkFn@http://localhost:3000/bower_components/angular/angular.js:9638:11
compositeLinkFn@http://localhost:3000/bower_components/angular/angular.js:8878:13
publicLinkFn@http://localhost:3000/bower_components/angular/angular.js:8743:30
lazyCompilation@http://localhost:3000/bower_components/angular/angular.js:9134:16
boundTranscludeFn@http://localhost:3000/bower_components/angular/angular.js:8921:16
controllersBoundTransclude@http://localhost:3000/bower_components/angular/angular.js:9688:20
_injectContentIntoTemplate@http://localhost:3000/bower_components/md-data-table/dist/md-data-table.js:339:21
mdtTableDirective/<.link@http://localhost:3000/bower_components/md-data-table/dist/md-data-table.js:330:17
bind/<@http://localhost:3000/bower_components/angular/angular.js:1291:15
cloneAndAnnotateFn/<@http://localhost:3000/bower_components/angular/angular.js:10243:41
invokeLinkFn@http://localhost:3000/bower_components/angular/angular.js:10249:9
nodeLinkFn@http://localhost:3000/bower_components/angular/angular.js:9638:11
compileTemplateUrl/<@http://localhost:3000/bower_components/angular/angular.js:9977:13
processQueue@http://localhost:3000/bower_components/angular/angular.js:16643:37
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:16683:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/bower_components/angular/angular.js:17958:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/bower_components/angular/angular.js:17772:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/bower_components/angular/angular.js:18066:13
done@http://localhost:3000/bower_components/angular/angular.js:12207:36
completeRequest@http://localhost:3000/bower_components/angular/angular.js:12433:7
requestLoaded@http://localhost:3000/bower_components/angular/angular.js:12361:9
 <mdt-column align-rule="left" class="ng-scope ng-isolate-scope">

angular version: "angular": "^1.5.0",
angular-material version: "angular-material": "^1.1.1",
md-data-table version: "md-data-table": "^2.2.0"

Thanks in advance for any help you can offer

[AklsKiu]

I have the same problem, when add in my project. I believe they have any conflict with other libraries.

Thanks,

[keyCat]

Hi,

The issue appears to be located within mdtColumn directive (or, more precisely, within jqLite) when it tries to interpolate any html/text inside of the element. My guess would be that if you were to include jQuery in your project, it would work as intended: jqLite returns undefined for text nodes from .html() when jQuery returns a string of text. Unfortunately, I have no time to test this assumption.

Temporary fix for this would be to include jQuery in your project, or, if you don't want to do that, simply wrap the text inside of your <mdt-column></mdt-column> elements in html tags (e.g. <span></span>):

<mdt-table
  table-card="{title: 'Nutritions'}" 
  mdt-row="{
    'data': sl.nutritionList,
    'column-keys': ['name', 'calories', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron']
  }">
          <mdt-header-row>
            <mdt-column align-rule="left"><span>Dessert (100g serving)</span></mdt-column>
            <mdt-column align-rule="right"><span>Calories</span></mdt-column>
            <mdt-column align-rule="right"><span>Fat (g)</span></mdt-column>
            <mdt-column align-rule="right"><span>Carbs (g)</span></mdt-column>
            <mdt-column align-rule="right"><span>Protein (g)</span></mdt-column>
            <mdt-column align-rule="right"><span>Sodium (mg)</span></mdt-column>
            <mdt-column align-rule="right"><span>Calcium (%)</span></mdt-column>
            <mdt-column align-rule="right"><span>Iron (%)</span></mdt-column>
          </mdt-header-row>
</mdt-table>

Worked for me.

[kenny661]

I always got this error:

bundle.js:30416 TypeError: Cannot read property 'length' of undefined at $interpolate (http://localhost:8081/public/js/bundle.js:28796:17) at http://localhost:8081/public/js/bundle.js:113106:20 at publicLinkFn (http://localhost:8081/public/js/bundle.js:24821:30) at lazyCompilation (http://localhost:8081/public/js/bundle.js:25213:26) at boundTranscludeFn (http://localhost:8081/public/js/bundle.js:25000:17) at controllersBoundTransclude (http://localhost:8081/public/js/bundle.js:25767:21) at Object.link (http://localhost:8081/public/js/bundle.js:113105:23) at http://localhost:8081/public/js/bundle.js:17345:19 at http://localhost:8081/public/js/bundle.js:26322:45 at invokeLinkFn (http://localhost:8081/public/js/bundle.js:26328:10) <mdt-column class="ng-scope ng-isolate-scope">

@keyCat adding jQuery(2.1.3) and the solved the problem for me.

[iceman3000]

I am experiencing this issue, however, the error is only thrown on after the third column is processed. I've tried re-ordering the columns in case it was an issue with the data or text, but no matter, it only errors after the 3rd iteration. Any ideas? (I've tested everything else suggested so far to no avail).

[whereisaaron]

Ref: #315

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 😒

Foo