ui-router ui-grid Typeerror undefined

Question

I use ui-router and ui-grid in a project. I receive a TypeError when I switch the state to a different view which contains a ui-grid. I did not had this issue without the ui-router. I've experimented with a single html-page that contained a ui-grid. No problems there. When I implemented the ui-router the TypeError occured.

I've added a demo on plunkr. http://plnkr.co/edit/FzsxLDNGRWQrpGUKNHBa?p=preview As you can see in the following piece of code in my app.js, my module gets populated with dependencies for ui-router and ui-grid.

var app = angular.module('app', [ 'ui.router', 'ui.grid' ]);

If you switch to the second view in this demo, you will see an empty ui-grid. Chrome developper tools report the TypeError.

Answer 1

You are referring the View2Controller as vm in your template but the gridOptions is add in the $scope, just change the $scope.gridOptions to vm.gridOptions and it will work.

vm.gridOptions = {
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        },        
        data: 'vm.customers',

        columnDefs: [
          {
              field: 'status', name: '', width: 50, sort: {
                  direction: uiGridConstants.DESC,
                  priority: 0
              }
          },
          {
              field: 'member', name: 'M', width: 50, type: 'boolean',
              cellTemplate: '<input type="checkbox" ng-model="row.entity.lid" >'
          },
          {
              field: 'company', name: 'Company', width: 200, minWidth: 200, maxWidth: 600
          },
          { field: 'creationDate', name: 'Date', width: 120, cellClass: 'right-align', type: 'date' },
        ]
    };

http://plnkr.co/edit/mpRYJZKEnwPIRefPQc9J?p=preview