简单的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服务器来运行你的网站。
