Menu
I'm trying to to get the custom directive I created to work. The directive I created houses a table, which references a controller. I didn't include the ProjectController in my code because that part works, but once i put everything into a custom directive it stopped working. I believe the custom directive isn't getting hit. Any suggestions?
app.js
app.directive('projectInformation', function () {
return {
restrict: 'E',
templateUrl: 'project-information.html',
controller: function() {
this.products = projects
},
controllerAs: 'projectCtrl'
};
});
project-information.html
<table class="table table-striped">
<thead>
<!--TABLE HEAD-->
<tr>
<th>#</th>
<th>Project </th>
<th>Name </th>
<th>Phone </th>
<th>Company </th>
<th>Date</th>
</tr>
</thead>
<tbody>
<!--TABLE BODY-->
<!--Angular; Repeats all of the content in the dTIMS project array-->
<tr ng-repeat="product in projectCtrl.products">
<td>{{ product.id }}</td>
<td>{{ product.name }}</td>
<td>{{ product.supervisor }}</td>
<td>{{ product.phone }}</td>
<td>{{ product.company }}</td>
<td>{{ product.date }}</td>
</tr>
</tbody>
ReviewAndAdjust.cshtml
<div class="col-lg-6">
<!--GRAD CONTENT-->
<!--first instance-->
<project-information class="table-responsive"></project-information>
</div>
<div class="content" id="elementGrid"><!--GRAD CONTENT-->
<!--second instance-->
<project-information class="active content table-responsive"></project-information>
</div>
LayoutPage.cshtml
<html ng-app="dTIMSApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="~/Scripts/app.js"></script>
</head>
<body><!--ng-controller="ProjectController as projectCtrl" used to be in body tag-->
</body>
</html>
I've also tried using other alternatives to a custom element directive. I tried a custom attribute directive and using the ng-include directive but the div still wont be populated with the table from the html page. Also in the console log for the webpage it says 'GET http://localhost:58893/Dashboards/project-information.html 404 (Not Found)'
645
Try specifying the appropriate controller where "projectCtrl" comes from like so or inside the containing div in your project-information view:
app.directive('projectInformation', function () {
return {
restrict: 'E',
templateUrl: 'project-information.html',
controller: 'yourControllerHere'
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
