ng-table inside a custom directive error "Cannot set property '$data' of null"

Question

here my question:

I am trying to build a directive in angular, which would use an ng-table inside. The problem is that input parameter tableData is initialized as an empty array initially because it is set from the outside of the directive when the user clicks on a button.

So i added a watch on the tableData and tried to reload the table when the tableData changes.

But the differ.resolve functions ends up with the following exception.

Please help

directive usage

<table-multiselect table-data="objectArray"></table-multiselect>

This is my temp

TableMultiselect.tmpl.cshtml

<table ng-table="multiselect" class="table">
     <tr ng-repeat="feature in $data">
            <td data-title="'Id'" sortable="'id'">{{feature .id}}</td>
            <td data-title="'Name'" sortable="'name'">{{feature .name}}</td>
            <td data-title="'Type'" sortable="'type'">{{feature .type}}</td>
    </tr>
</table>

controller

.directive('TableMultiselect', function (ngTableParams) {
    return {
        restrict: 'E',
        templateUrl: 'TableMultiselect.tmpl.cshtml',
        scope: {
            tableData: '='
        },
        controller: function ($scope) {

            var buildMultiSelectTable = function () {
                return new ngTableParams({
                    page: 1,
                    count: 10,
                    sorting: {
                        id: 'asc'
                    },
                    filter: {},

                }, {
                    counts: [10],
                    total: $scope.tableData.length, // length of data
                    getData: function ($defer, params) {
                        var data = $scope.tableData;
                        if (data.length <= 10) {
                            params.settings({ 'counts': [] });
                        }
                        params.total(data.length);
                        $defer.resolve(data);
                    }
                });
            };

            $scope.multiselect = buildMultiSelectTable();

            $scope.$watch('tableData', function (newValue, oldValue) {
                if ($scope.tableData != undefined && $scope.tableData.length > 0) {
                   $scope.multiselect.reload();
                }
            });
        },


    };
});

Error

TypeError: Cannot set property '$data' of null
    at angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:3095
    at l.promise.then.J (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:101)
    at angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:102
    at h.a.$get.h.$eval (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:113)
    at h.a.$get.h.$digest (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:110)
    at h.a.$get.h.$apply (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:113)
    at m (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:72)
    at w (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:77)
    at XMLHttpRequest.B.onreadystatechange (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:79)

Answer 1

One problem that is obvious from the code you have pasted is the directive name should be 'tableMultiSelect' not 'TableMultiSelect'

app.directive('tableMultiselect', function (ngTableParams) {

There might be other problems which are tough to guess with out looking at the complete code, so here's the working implementation based on what i understood from your question : http://plnkr.co/edit/7MHhl6AKdfzajprfc0xK?p=preview

And this is how your object array changes at runtime.

app.controller('AppCtrl',function($scope,$timeout){
    $scope.objectArray = [];

    $timeout(function(){
      $scope.objectArray.push({
        id: 1,
        name : "Abc",
        type : "type1"
      });
    },2000);

  });