3

Hi all I'm new to angular. My post is identical to: Inline `ng-template` not found by `ng-include`.

I have an ng-include which isn't finding my ng-template, keep getting a 404: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/display.

When I put the template in a separate html file it works fine but obviously this is not ideal.

Any ideas would be greatly appreciated.

My view:

<div class="panel panel-primary"
 ng-controller="TimesheetListCtrl as vm">
<div class="panel-heading"
     style="font-size:large">
    Timesheet for week ending 
</div>
<div class="panel-body">
    <table class="table">
        <thead>
            <tr>
                <td>Program</td>
                <td>Category</td>
                <td>Activity</td>
                <td>Reference</td>
                <td>Monday</td>
                <td>Tuesday</td>
                <td>Wednesday</td>
                <td>Thursday</td>
                <td>Friday</td>
                <td>Saturday</td>
                <td>Sunday</td>
                <td>Total</td>
                <td></td>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="timesheet in vm.timesheets" ng-include="'display'"><!--ng-include="vm.getTemplate(timesheet)"-->
            <script type="text/ng-template" id="display">
                <td>{{ timesheet.program }}</td>
                <td>{{ timesheet.category }}</td>
                <td>{{ timesheet.activity }}</td>
                <td>{{ timesheet.reference }}</td>
                <td>{{ timesheet.hrsWrkMonday }}</td>
                <td>{{ timesheet.hrsWrkTuesday }}</td>
                <td>{{ timesheet.hrsWrkWednesday }}</td>
                <td>{{ timesheet.hrsWrkThursday }}</td>
                <td>{{ timesheet.hrsWrkFriday }}</td>
                <td>{{ timesheet.hrsWrkSaturday }}</td>
                <td>{{ timesheet.hrsWrkSunday }}</td>
                <td><b>{{ timesheet.hrsWrkMonday + timesheet.hrsWrkTuesday + timesheet.hrsWrkWednesday + timesheet.hrsWrkThursday + timesheet.hrsWrkFriday + timesheet.hrsWrkSaturday + timesheet.hrsWrkSunday }}</b></td>
                <td><a class="btn btn-primary">Edit</a>
                    <a class="btn btn-primary">Delete</a></td>                
            </script>
            <script type="text/ng-template" id="edit">
                <td>Program EDIT</td>
                <td>Category EDIT</td>
                <td>Activity EDIT</td>
                <td>Reference EDIT</td>
                <td>Monday EDIT</td>
                <td>Tuesday EDIT</td>
                <td>Wednesday EDIT</td>
                <td>Thursday EDIT</td>
                <td>Friday EDIT</td>
                <td>Saturday EDIT</td>
                <td>Sunday EDIT</td>
                <td>Total EDIT</td>
                <td><a class="btn btn-primary">Save</a>
                    <a class="btn btn-primary">Cancel</a>
                </td>                
            </script>
        </tr>
        </tbody>
    </table>
</div>

My index.html

<html>
<head lang="en">
<meta charset="UTF-8">
<title>DnB Timesheet Management</title>
<!-- Style sheets -->
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="timesheetManagement">
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="navbar-brand">DnB Timesheet Management</div>
        </div>
    </div>
</nav>
<div class="container">
    <div ui-view></div>
    <!--<div ng-include="'app/timesheets/timesheetListView.html'"></div>-->
</div>
<!-- Library Scripts -->
<script src="scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
<!-- Application Script -->
<script src="app/app.js"></script>
<!-- Services -->
<script src="common/common.services.js"></script>
<script src="common/timesheetResource.js"></script>
<!-- Product Controllers -->
<script src="app/timesheets/timesheetListCtrl.js"></script>
<script src="app/timesheets/timesheetEditCtrl.js"></script>
</body>
</html>
Community
  • 1
  • 1
D34th
  • 301
  • 4
  • 8
  • 6
    you should put the scripts for the `ng-template` *outside* the `ng-repeat`, since the `ng-repeat` doesn't render until there is at least one element to display. Since what you *actually* want to display is the `ng-include` the `ng-template` doesn't need to be nested inside the `ng-repeat`. It doesn't matter where the `ng-template` scripts are in the HTML, as long as they are rendered. – Claies May 30 '16 at 01:18
  • all that being said, the purpose of using `ng-template` and `ng-include` in this context isn't clear, since you have essentially defined an *inline* template for `ng-repeat` that would already do what you wanted if you removed the `script` tag from it. – Claies May 30 '16 at 01:26
  • All the templates having the same ID would just replace one another and you would end up with just one. – Saneesh B May 30 '16 at 06:14

0 Answers0