AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
本文实例讲述了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法。分享给大家供大家参考，具体如下：
AngularJS中提供的ng-include指令，很类似于JSP中的<jsp:include>用来将多个子页面合并到同一个父页面中，避免父页面过大，可读性差，不好维护。
父页面parent.html代码如下：
<html>
<head>
<script src="angular-1.2.2/angular.js"></script>
<script>
function rootController($scope,$rootScope,$injector)
{
$rootScope.name = "aty";
$rootScope.age = 25;
}
</script>
</head>
<body ng-app ng-controller="rootController">
<h1>Hello, {{name}}!</h1>
<h1>Hello, {{age}}!</h1>
<div id="included" ng-include="'child.html'">
<input type="button" value="2"/>
</div>
</body>
</html>
被包含的子页面child.html代码如下：
<div>
<h1>included, {{name}}!</h1>
<h1>included, {{age}}!</h1>
</div>
我用IE11和Chrome39运行parent.html，发现child.html页面不能包含到parent.html中。IE下报错信息如下：
Error: 拒绝访问。
at Anonymous function (file:///D:/learn/angular-1.2.2/angular.js:7852:7)
at sendReq (file:///D:/learn/angular-1.2.2/angular.js:7720:9)
at serverRequest (file:///D:/learn/angular-1.2.2/angular.js:7454:9)
chrome下报错信息如下：
XMLHttpRequest cannot load file:///D:/learn/include.html.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/learn/include.html'.
IE下的提示有些晦涩，不过chrome提示很明显：不能跨域访问。通过上面的错误提示，可以看到:使用ng-include指令的时候，会用到AJAX请求XMLHttpRequest。但是我们是直接用浏览器打开的parent.html，并没有通过web容器访问，所以存在跨域访问问题，加载child.html也就失败了。解决办法很简单：将代码部署到tomcat等web容器下，通过http访问即可。
平时在练习JavaScript或者是JS框架的时候，一版都是使用比较轻量级的工具，不会使用像Eclipse之类IDE，我一般使用Notepad++编写js代码。Notepad++可以方便地调用本机安装的浏览器。像ng-include这样的指令，必须要有web容器的支持。可以使用前端开发神器webstorm，该工具运行html的时候，会自动启动内置的web容器，这样ng-include指令就不会报错了。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
-
本文向大家介绍php ci框架中加载css和js文件失败的原因及解决方法，包括了php ci框架中加载css和js文件失败的原因及解决方法的使用技巧和注意事项，需要的朋友参考一下 在将html页面整合到ci框架里面的时候，加载css和js失败，弄了半天发现ci框架是入口的框架， 对框架中文件的所有请求都需要经过index.php处理完成，当加载外部的css和js文件的时候要使 用base_url(
-
本文向大家介绍mysql中插入emoji表情失败的原因与解决，包括了mysql中插入emoji表情失败的原因与解决的使用技巧和注意事项，需要的朋友参考一下 失败场景 用户昵称中存在emoji表情，调用jdbc往mysql数据库插入的时候抛出异常 java.sql.SQLException: Incorrect string value: '\xF0\x9F\x90\x9B' 失败原因 mysql的
-
问题内容： 我花了一段时间试图找到一个优雅的解决方案，而我却找到了一个“可行”的解决方案，它感觉不是最简单或正确的做事方式。 所以，我的问题是…如何动态加载指令！在某些情况下，以下是我希望我能摆脱它的方式！除了模板加载之外，我没有包含路由或其他任何内容，而是为下面的控制器分配了ng- controller。 app.js template.html 任何人都可以提供的建议将不胜感激，如果我做任何明
-
问题内容： 我正在尝试创建一个指令，该指令将创建与创建指令的元素具有相同ng-model的输入字段。 到目前为止，这是我想到的： 的HTML 的JavaScript 但是，我不确定这是处理这种情况的正确方法，并且存在一个错误，即我的控件未使用ng-model target字段的值初始化。 这是上面代码的简称：http ://plnkr.co/edit/IvrDbJ 处理此问题的正确方法是什么？ 编
-
本文向大家介绍AngularJS ng-mousedown 指令，包括了AngularJS ng-mousedown 指令的使用技巧和注意事项，需要的朋友参考一下 AngularJS ng-mousedown 指令 AngularJS 实例 在鼠标按下时执行表达式： 定义和用法 ng-mousedown 指令用于告诉 AngularJS 鼠标在指定的 HTML 元素上按下时要执行的操作。 ng-m
-
Angularjs ng用div标记重复。。我有一个带有div标记的代码，如图所示。。我想重复整个div，在第二个循环中img src是不同的。。如何使用angularjs中的ng repeat指令执行此操作？