grid.options are undefined #5500
Description
Hi. I trying to use ui-grid by Your documentation.
For some reason I always have the error: "Cannot read property 'rowTemplate' of undefined"
Looks like in ui-grid.js on line 9227 grid.options are undefined for some reason.
Note. On Your examples grid controller writed on the main page.
But on My project I load template via $routeProvider:
var app = angular.module('app', [ 'ui.grid' , 'ui.grid.selection' ]).config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/grid', {
controller: 'GridController',
templateUrl: 'angular/view/examples/grid.html',
controllerAs: 'vm'
});
}]);
In this case ui-grid can-not be load as described on Docs.
My full example of code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
<body>
<div class="col-lg-12" ng-view>
<!-- dynamic content -->
</div>
<!-- jQuery, angular, bootstrap -->
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<!-- main module and router-->
<script src="app.js"></script>
<!-- examples -->
<script src="grid.js"></script>
</body>
</html>
app.js
(function() {
'use strict';
angular.element(document).ready(function() {
//initialize app
angular.bootstrap(document, ['app']);
});
var app = angular
.module('app', [
'ngRoute', 'ngResource', 'ngAnimate', 'ngCookies', 'ui.bootstrap', 'ui.grid', 'ui.grid.selection'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/grid', {
controller: 'GridController',
templateUrl: 'angular/view/examples/grid.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/'
});
}]);
})();
grid.js
(function() {
'use strict';
angular
.module('app')
.controller('GridController', function() {
//empty controller
})
.controller('GridTpl', ['$scope', function($scope) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [{
name: 'name'
}, {
name: 'age'
}];
$scope.myData = [{
name: "Moroni",
age: 50
}, {
name: "Tiancum",
age: 43
}, {
name: "Jacob",
age: 27
}, {
name: "Nephi",
age: 29
}, {
name: "Enos",
age: 34
}];
$scope.gridOptions.data = $scope.myData;
}]);
})();
grid.html
<div class="col-md-6 col-md-offset-3" ng-controller="GridTpl">
<div ui-grid="gridOptions" class="myGrid"></div>
</div>