CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directive
Markus
Markus

Reputation: 297

AngularJS Custom directive doesn't work

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>

enter image description here

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)'

Upvotes: 5

Views: 7952

Answers (3)

Markus
Markus

Reputation: 297

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'
    };
});

Upvotes: 0

Arashk
Arashk

Reputation: 627

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'
    };
});

Upvotes: 1

IfTrue
IfTrue

Reputation: 543

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'
    };
});

Upvotes: 2

Related Questions