简单的ng-include不起作用

我第一次和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页面上,我的页眉,导航和页脚不出现。

你正在做一个包括标题。 url而不是头。 HTML 。 它看起来像你想在src属性中使用文字,所以你应该用@DiscGolfer的评论中提到的引号。

更改

  <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

我有一个类似的问题,简单的NG – 包括不渲染:

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

我用单引号包装文件path,现在呈现:

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

我有一个类似的问题,让我在这里。

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

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

修复我:确保你有ng-app以外的ng-include ! 如此明显。 作为一个angular度的noob的价格。

我只是想出了这一个!

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

现在工作正常。 干杯!

我也遇到过这个问题。 这对我来说是有效的。

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

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

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

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

我在同一个问题上挣扎,几乎完成了所有在不同的堆栈中build议的东西,但是这对我没有任何作用。 在控制台上,我得到错误:

“交叉来源请求仅支持协议scheme:http,data,chrome,chrome-extension,https,chrome-extension-resource。

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

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