Question

我第一次玩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页面时，我的标题，导航和页脚没有出现。

Answer 1

您正在使用标题。网址而不是标题。 html 。看起来你想在src属性中使用文字，所以你应该将它们用引号括起来，正如@DRiFTy在评论中提到的那样。

更改

 <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

Answer 2

我有一个类似的问题，简单的ng-include not rendering：

<div ng-include="views/footer.html"></div>

我将文件路径包装在单引号中，现在呈现：

<div ng-include="'views/footer.html'"></div>

Answer 3

我有一个类似的问题让我来到这里。

ng-include没有填充我的部分内容，但没有控制台错误，也没有404。

然后我意识到我做了什么。

为我修好：确保ng-app之外的ng-include！如此明显作为Angular noob的价格。

Answer 4

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

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

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

Answer 5

我正在努力解决同样的问题，几乎完成了不同堆栈中建议的所有内容，但它对我不起作用。在控制台上，我收到错误：

“只有协议方案支持跨源请求：http，数据，chrome，chrome-extension，https，chrome-extension-resource。”

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

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

Answer 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>

现在它正常工作。干杯！

Answer 7

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

内的内容

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

Answer 8

ng-include在chrome和explorer中都不起作用，但在Firefox中有效，所以这可能是兼容性问题。当然，请尝试在Firefox或Edge或其他浏览器中生成报告。

Answer 9

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

RestTemplate restTemplate = new RestTemplate();
restTemplate.getMessageConverters()
        .add(0, new StringHttpMessageConverter(Charset.forName("UTF-8")));

未正确关闭更正如下：

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

想发布它可能有助于我花费数小时解决的任何人......

Answer 10

ng-include文件仅适用于从Web服务器获取的文件（需要类似http://mywebsite/myinclude.html链接）。如果您直接从本地文件夹中获取文件，则无法使用（c：\ myinclude.html无法使用）

Answer 11

ng-include 指令仅在通过某些服务器（本地主机或在线）而非否查看文件时才能正常工作直接在文件系统下查看您的文件，例如（file：///yourpath/index.html）。

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

简单的ng - 包括不工作

11 个答案: