简单的ng-include无法正常工作


69

我是第一次使用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页面时,我的页眉,导航和页脚未出现。


Answers:


148

您正在执行头文件的包含。网址,而不是标头。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的


85
为此,您需要将路径用单引号引起来:src="'partials/structure/header.html'"
DRiFTy 2014年

1
我忘了在控制台中检查404。我的路错了。
fish鱼2014年

3
@DiscGolfer这是非常重要的信息。在此之前,我检查了我的代码很久了!+1
布莱德·伯德

1
有人可以详细说明为什么必须传递字符串文字吗?好像可以避免的主要GOTCHA,也许我错过了一些东西?
DeBraid 2015年

2
它更加灵活。我用它来嵌入函数调用,这些函数调用可以即时生成适当的url。
Ferruccio 2015年

100

我有一个简单的ng-include无法渲染的类似问题:

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

我将文件路径包装在单引号中,现在呈现出来:

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


7
你节省了我的时间!谢谢
Soundar Rathinasamy 2015年

我通过试探得到了这个东西。但是,仍然不知道“内部”的用途是什么?为什么只有“会造成问题”
Pankaj 2015年

1
为什么会这样?
Mohammad Kermani

2
您需要用单引号将字符串文字(例如,文件路径)包装起来,因为全引号内的所有内容都将作为代码求值,因此,如果没有单引号,Angular编译器将在您的文件路径名中包含一个函数。
sean.boyer

18

我有一个类似的问题使我落在这里。

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

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

为我解决:确保您ng-app不在ng-include!如此明显。成为Angular noob的代价。


2
JEEZ,这是很难追踪的信息。我知道这听起来很荒谬,但是有很多文章忽略了这一部分。甚至有一些“ Hello World”教程都没有提到它。我找到了这个答案,然后找到了一个工作的JSfiddle来学习我需要的东西<div ng-app>。荒诞。
克拉克2015年

这帮助了我。甚至w3schools都没有提到这一点。
wirlez

2

我也遇到了这个问题。这就是对我有用的。

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

您要添加ng-app=""。所以它应该像这样:<div ng-app="" ng-include="'html/form.htm'"></div>


1
对于以上答案,假定已应用ng-app,并且在其中使用了ng-include。
Pankaj 2015年

最好将ng-app =“ myApp”添加到开始的<html>标记中,而不要添加到<div>
DotNet Fan

...或在人体标签中<body ng-app="">
Christian Luneborg,

2

我在同一个问题上苦苦挣扎,几乎完成了所有建议的工作,但它对我没有用。在控制台上,出现错误:

“仅协议方案支持跨源请求:http,数据,chrome,chrome扩展名,https,chrome-extension-resource。”

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

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


2

我只是想通了!

对我来说,我使用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。
Christian Luneborg

1

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

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


1

ng-include在chrome和Explorer中均无法正常运行,但在Firefox中可以正常运行,因此这可能是兼容性问题。当然,请尝试在Firefox或Edge或其他浏览器中生成报告。


1
欢迎使用Stackoverflow。如果您查看“如何回答”页面以便将来在堆栈溢出时进行尝试,那将更好。
-Momin

确实,以过分预防策略而闻名的chrome浏览器会阻止脚本从File://源调用页面,这就是为什么您无法在chrome中渲染有角偏角的原因。不过,这是正确的假设,并且可能会导致多种可能阻碍ng-view / ng-include正常运行的原因。
Abr001am

0

我也有类似的问题:愚蠢的错误导致IT,我在textArea EG下面:

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

以为发布它可能会帮助我花几个小时来解决的任何人。



-1

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

w3schools的这个示例应该可以正常工作。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.