ng-include 不填充 div答案

【问题标题】：Ng-include not populating divng-include 不填充 div
【发布时间】：2023-03-27 15:18:01
【问题描述】：

在我的网页上，我有多个实例将显示同一个表格。因此，每次我使用来自 AngularJS 的 ng-include 时，都不必对表格进行硬编码。但是由于某种原因，一旦我将表格放在它自己的 html 页面中并在其位置放置一个 ng-include，它就根本不会出现在页面上。我得到的唯一线索是在控制台日志中显示错误“angular.js:9827 GET http://localhost:58893/Dashboards/project-information.html404 (Not Found)”

index.cshtml

<div class="ibox-content" id="ibox-2"><!--DIV CONTENT-->
    <div class="active content table-responsive" ng-include="'project-information.html'"></div>
</div>

项目信息.html

<table class="table selectOption">
<thead>
    <tr>
        <th>#</th>
        <th>Project </th>
        <th>Name </th>
        <th>Phone </th>
        <th>Company </th>
        <th>Date</th>
    </tr>
</thead>
<tbody>
    <!--Angular; Repeats all of the content in the dTIMS project array-->
    <tr class="option" 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>

app.js

app.controller('ProjectController', function () {
    this.products = projects
});

header.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">
        ....call to the index page inside here
    </body>
</html>

【问题讨论】：

好像是文件路径问题，能分享一下你的模板文件路径吗？
错误只是说找不到文件http://localhost:58893/Dashboards/project-information.html。你确定路径正确吗？
@user2954587 我很困惑 ng-include 没有连接到它引用的页面吗？
@Markus 是的，是project-information.html /Dashboards/project-information.html 的完整文件路径吗？
尝试在“脚本”中创建一个“包含”文件夹并将 html 放入其中。我相信您的服务器不允许直接访问 Views 文件夹。

标签： javascript html angularjs angularjs-ng-include

【解决方案1】：

某些服务器不允许访问视图文件夹。

在现有的 Scripts 文件夹上创建一个文件夹“includes”，并将 html 放入。

在 ng-include 上，使用新路径：

<div 
    class="active content table-responsive" 
    ng-include="'/Scripts/includes/project-information.html'">
</div>

【讨论】：