简单的 ng-include 不起作用答案

【问题标题】：Simple ng-include not working简单的 ng-include 不起作用
【发布时间】：2014-05-24 08:57:44
【问题描述】：

我是第一次使用 AngularJS，并且正在努力将 ng-include 用于我的页眉和页脚。

这是我的树：

myApp
assets
   - CSS
   - js
        - controllers
        - vendor
             - angular.js
             - route.js
             ......
             ......
             ......
        main.js
pages
   - partials
        - structure
              header.html
              navigation.html
              footer.html
   index.html
   home.html

index.html：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>AngularJS Test</title>

    <script src="/assets/js/vendor/angular.js"></script>
    <script src="/assets/js/vendor/route.js"></script>
    <script src="/assets/js/vendor/resource.js"></script>
    <script src="/assets/js/main.js"></script>

</head>
    <body>          

        <div ng-include src="partials/structure/header.url"></div>
        <div ng-include src="partials/structure/navigation.url"></div>    

        <div id="view" ng-view></div>   

        <div ng-include src="partials/structure/footer.url"></div>
    </body>
</html>

main.js

var app = angular.module("app", ["ngResource", "ngRoute"]);


app.config(function($routeProvider) {

$routeProvider.when("/login", {
    templateUrl: "login.html",
    controller: "LoginController"
});

$routeProvider.when("/home", {
    templateUrl: "home.html",
    controller: "HomeController"
});

$routeProvider.otherwise({ redirectTo: '/home'});

});

app.controller("HomeController", function($scope) {
    $scope.title = "Home";
});

home.html

<div>
<p>Welcome to the {{ title }} Page</p>
</div>

当我进入 home.html 页面时，我的页眉、导航和页脚没有出现。

【问题讨论】：

AngularJS ng-include 的可能重复项

标签： javascript html angularjs angularjs-scope

【解决方案1】：

ng-include 文件仅适用于从 Web 服务器获取的文件（需要类似 http://mywebsite/myinclude.html 链接的内容）。如果您直接从本地文件夹中获取文件，它将不起作用（c:\myinclude.html 将不起作用）

【讨论】：

【解决方案2】：

如果您通过某些服务器（本地主机或在线） 和 NOT 查看文件，ng-include 指令应该可以正常工作直接在文件系统下查看您的文件，例如 (file:///yourpath/index.html)。

This example from w3schools 应该可以正常工作。

【讨论】：

【解决方案3】：

您正在包含 header.url 而不是 header.html。看起来您想在 src 属性中使用文字，因此您应该将它们用引号括起来，正如 @DRiFTy 在 cmets 中提到的那样。

改变

 <div ng-include src="partials/structure/header.url"></div>
 <div ng-include src="partials/structure/navigation.url"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="partials/structure/footer.url"></div>

到

 <div ng-include src="'partials/structure/header.html'"></div>
 <div ng-include src="'partials/structure/navigation.html'"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="'partials/structure/footer.html'"></div>

如果这不起作用，请检查浏览器控制台是否有任何 404

【讨论】：

要添加到这里，您需要将路径用单引号括起来：src="'partials/structure/header.html'"
我忘了在控制台中检查 404。我的路错了。
@DiscGolfer 这是非常重要的信息。在此工作之前，我检查了我的代码很长时间！ +1
有人能详细说明为什么你必须传递字符串文字吗？似乎是一个可以避免的主要问题，也许我错过了什么？
它更加灵活。我用它来嵌入函数调用，这些函数调用会即时生成适当的 url。

【解决方案4】：

我也有类似的问题：愚蠢的错误导致 IT ，我在 textArea 下面例如：

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" > `

没有正确关闭以下更正：

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" ></textarea> 

<div ng-switch="vm.frmDOA.isGenerateDebitNote">
                <ng-include src="vm.showupload()"></ng-include>
            </div>

认为发布它可能会帮助我花费数小时解决的任何人......

【讨论】：

【解决方案5】：

ng-include 不能在 chrome 和资源管理器中工作，但可以在 Firefox 中工作，所以这可能是兼容性问题。可以肯定的是，请尝试在 Firefox 或 Edge 或其他浏览器中生成报告。

【讨论】：

欢迎来到 Stackoverflow。如果您签出How to Answer 页面以备将来在堆栈溢出时的努力会更好。 -谢谢
确实，以其过度预防政策而闻名的 chrome 浏览器会阻止脚本从 File:// 来源调用页面，这就是为什么您不能在 chrome 中呈现角度部分的原因。尽管如此，这是正确的假设，并且可能会导致阻碍 ng-view/ng-include 运行的多种原因。

【解决方案6】：

我刚想出来这个！

对我来说，我使用 CDN 来导入我的 angular.min.js 文件，该文件显然无法正常工作。我切换到：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

并在我的正文标签中包含ng-app=""：

<body ng-app="">
<div ng-include="'testfile.html'"></div>

现在一切正常。干杯！

【讨论】：

不，这在 IE11 和 Chrome 上不起作用。仅适用于 FF。

【解决方案7】：

我在同一个问题上苦苦挣扎，并且几乎完成了不同堆栈中建议的所有内容，但它对我不起作用。在控制台上，我收到了错误：

“跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。”

后来我意识到，我必须使用本地网络服务器（MAMP、WAMP 等）才能使其工作。

请注意上述错误信息。您可能没有使用本地 Web 服务器来运行您的网站。

【讨论】：

【解决方案8】：

是的，没有''，ng 会尝试评估ng-include("") 中的内容

此评估是您不将{{}} 放入这些指令的另一个原因。

【讨论】：

【解决方案9】：

我也遇到过这个问题。这对我有用。

所以不要写这个：<div ng-include="'html/form.htm'"></div>

您想添加ng-app=""。所以它应该是这样的：<div ng-app="" ng-include="'html/form.htm'"></div>

【讨论】：

对于上述答案，假设已经应用了 ng-app，我们在其中使用了 ng-include。
最好将 ng-app="myApp" 添加到开始标记，但不要添加到
...或在正文标签<body ng-app="">