Insert table via directive
I am trying to insert a table via a directive in Angular1.3 -
controller
var studentControllerModule = angular.module('studentDetailApp.controllers', []);
/*StudentController: controller for students*/
studentControllerModule.controller('StudentController', function ($scope) {
$scope.studentList = [ ....];
});
directive
angular.module('studentDetailApp.directives',[]).directive('studentDirective', function () {
return {
template: '<table><thead><tr> <th>NAME</th><th>COUNTRY</th></tr></thead><tbody> <tr ng-repeat="aStudent in studentList"><td>{{aStudent.name }}</td><td>{{aStudent.country }}</td></tr></tbody></table>'};
});
index.html
<html lang="en" ng-app="studentDetailApp">
<head>
<title>AngularJS Partial example</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div ng-controller="StudentController">
<div studentDirective></div>
</div>
</body>
</html>
I am not getting an exception, but I can’t see this table either. What am I doing wrong?
+3
source to share
1 answer
You were missing your ng app, the directives must be normalized to html: https://docs.angularjs.org/guide/directive Modified HTML:
<body ng-app="studentDetailApp">
<div ng-controller="StudentController">
<div class='a' student-directive></div>
</div>
</body>
Changed JS:
var app = angular.module('studentDetailApp', []);
app.controller('StudentController', function ($scope) {
$scope.studentList = ['nate', 'john', 'seth'];
});
app.directive('studentDirective', function () {
return {
template: '<table><thead><tr> <th>NAME</th><th>COUNTRY</th></tr></thead><tbody> <tr ng-repeat="aStudent in studentList"><td>{{aStudent.name }}</td><td>{{aStudent.country }}</td></tr></tbody></table>'
};
});
+1
source to share