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>{{ productpany }}</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=".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)'
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.pany }}</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./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)'
Share Improve this question edited Aug 12, 2015 at 12:10 Markus asked Aug 10, 2015 at 20:10 MarkusMarkus 2975 silver badges20 bronze badges 8- 1 Can you be more specific to what does not work? What is the expected behaviour and what is the behaviour you are getting? – Huangism Commented Aug 10, 2015 at 20:14
- 1 Is template being requested in dev tools network? You haven't provided much detail regarding troubleshooting or symptoms. What does happen? – charlietfl Commented Aug 10, 2015 at 20:15
- On top of my mind, have you checked for errors in the console, perhaps wrong path to your template or something that might give a hint? – AndersRehn Commented Aug 10, 2015 at 20:16
-
where is the
ng-controllerdefined? also, you show two instances here, were you expecting these two instances to have the same data or different data? – Claies Commented Aug 10, 2015 at 20:26 - How does it not work? – MacKentoch Commented Aug 10, 2015 at 20:27
3 Answers
Reset to default 2Try specifying the appropriate controller where "projectCtrl" es 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'
};
});
use replace option in your directive and you can also add an 'A' to restrict so you can invoke your directive as an attribute hope this will help
app.directive('projectInformation', function () {
return {
restrict: 'E',
replace: true,
templateUrl: 'project-information.html'
};
});
You are restricted from using ng-include to access the "View" folder, where "project-information.html" is located, once the website is running. So you must create a folder outside of the "Views" folder, place the project-information.html page inside that folder, and have the ng-include have the new path. The code will look something like this:
app.directive('projectInformation', function () {
return {
restrict: 'E',
templateUrl: '/Scripts/includes/project-information.html',
controller: function () {
this.products = projects
},
controllerAs: 'projectCtrl'
};
});