Geek Answers Handbook

AngularJS custom directive not working

I am trying to get a custom directive that I created to work. The directive I created contains a table that references the controller. I did not include ProjectController in my code because this part works, but as soon as I put everything in the user directive, it stopped working. I believe that the custom directive does not fall. 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>

enter image description here

I also tried using other alternatives to the custom elements directive. I tried a custom attribute directive and used the ng-include directive, but the div still won't be populated with a table from the html page. Also, the console log for the webpage says: "GET http: // localhost: 58893 / Dashboards / project-information.html 404 (not found) '

+4
source share
3 answers

You are not allowed to use ng-include to access the Browse folder, where project-information.html is located as soon as the website is launched. Therefore, you must create a folder outside the Views folder, place the project-information.html page inside this folder, and associate a new path with ng-include. 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' }; });
0
source

Try specifying the appropriate controller where "projectCtrl" acts the same way or inside the containing div in your design information view:

 app.directive('projectInformation', function () { return { restrict: 'E', templateUrl: 'project-information.html', controller: 'yourControllerHere' }; });
+2
source

use the replace option in your directive, and you can also add the restriction “A” so that you can refer to your directive as an attribute, hope this helps

 app.directive('projectInformation', function () { return { restrict: 'E', replace: true, templateUrl: 'project-information.html' }; });
+1
source

More articles:


All Articles