Cannot set property 'datarows' of undefined in ngHandsontable

Question

I have a problem with the ngHandsontable component: i'm getting this error:

Cannot set property 'datarows' of undefined

When trying to initialize the table. The code that i'm using is this:

<hot-table rowHeaders="true" startRows= "7" manualColumnResize="true" datarows="td"
                           settings="{  colWidths: [150, 150, 150, 150,150], colHeaders: colHeaders, contextMenu: ['row_above', 'row_below', 'remove_row'], afterChange: afterChange }">
  <hot-column data="COLUMN_1" title="'COLUMN_1'"></hot-column>
  <hot-column data="COLUMN_2" title="'COLUMN_2'"></hot-column>
  <hot-column data="COLUMN_3" title="'COLUMN_3'"></hot-column>
  <hot-column data="COLUMN_4" title="'COLUMN_4'"></hot-column>
  <hot-column data="COLUMN_5" title="'COLUMN_5'"></hot-column>
</hot-table>

And in the controller:

$scope.td = [{
    'COLUMN_1': ''
}];

Note that the settings object has some default properties that aren't present in my controller (colHeaders and afterChange). I've tried almost everything: i've removed the settings property, the datarows property, all the properties! without any change in the error message.

Looking into the source code of ngHandsontable i've found that this is the problematic line:

angular.forEach(bindingsKeys, function(key) {
  var mode = _this.scope[key].charAt(0);

  _this.$$isolateBindings[key] = {
    attrName: _this.scope[key].length > 1 ? _this.scope[key].substr(1, _this.scope[key].length) : key,
    collection: key === 'datarows',
    mode: mode,
    optional: false
  };
});

The error is with _this.$$isolateBindings[key] being _this.$$isolateBindings undefined.

I've no clue about this and i find that the configuration in my case is slightly different to the examples of the directive.

I'm actually using the 0.9.0 version, along with Handsontable 0.23.0 (free) and AngularJS 1.2.28.

What am i missing here?

Thank you.

Answer 1

I just found this:

https://github.com/handsontable/ngHandsontable/blob/develop/index.html#L69

Note: ngHandsontable supports angular in version 1.3 and greater.

It's because of the older Angular version you are using. I just upgraded to Angular 1.5.8 and then it works.