I am using more dependency modules for various application.I want to show the ngtable using directive. but this was not working. sometimes no error, some time i am getting following the error 'DemoCtrl' controller is not defined.how to solve this issue.
index.html:
<!DOCTYPE html>
<html ng-app="mrm">
<head lang="en">
<meta charset="UTF-8">
<title>Application</title>
<link rel="stylesheet" href="css/ocModal.light.css">
<link rel="stylesheet" href="css/ocModal.animations.css">
<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="css/ng-table.css" />
<script src="jquery-1.11.1.min.js"></script>
<script src="angular.min.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<div class="container">
<dpangTable></dpangTable>
</div>
<script data-require="ng-table@*" data-semver="0.3.0" src="ng-table.js"></script>
<script src="ngTable/ngTable.js"></script>
<script src="ngTable/ngTable-directive.js"></script>
</div>
</body>
</html>
app.js:
(function () {
var app = angular.module('mrm', ['ngRoute', 'mrm.lightbox','mrm.ngtbls']);
})();
ngTable.js:
(function(){
var app = angular.module('mrm.ngtbls',['ngTable']);
app.controller('DemoCtrl',['$scope','ngTableParams', function($scope, ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
alert("asfasF");
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}]);
})();
ngTable-directive.js:
(function(){
var app=angular.module('mrm.ngtbls',[]);
app.directive('dpangTable',[function(){
return {
restrict:'E',
replace:true,
controller:'DemoCtrl',
templateUrl:'app/views/ngTable.html',
link:function(scope,element,attr){
}
}
}]);
})();
ngTable.html:
<div ng-controller="DemoCtrl">
<p><strong>Page:</strong> {{tableParams.page()}}</p>
<p><strong>Count per page:</strong> {{tableParams.count()}}</p>
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
</div>
In ngTable-directive.js you effectively overwrite what you defined in ngTable.js. You have to omit the 2nd parameter within angular.module(). Then you will fetch the module instead of redefining it.
You should also place all the script tags either inside the head section, or at the end of the body section. Concerning Angular I would recommend placing everything inside the head, as I could imagine that the bootstrapping of Angular (it listens on DOMContentLoaded event) could prevent certain modules to be added in time (on a random basis).