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

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>

Share Improve this question edited Aug 12, 2015 at 12:10 asked Aug 10, 2015 at 20:10 Markus 2975 silver badges20 bronze badges

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-controller defined? 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

| Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - AngularJS Custom directive doesn't work - Stack Overflow

3 Answers 3