javascript - AngularJS 包含可重用的 html 内容

标签 javascript html angularjs

我是 AngularJS 新手。

我想在主 html 中包含可重用的 html。当我尝试重做this example时, 它失败。目前,我将 myUsers_List.htmmyUsers_Form.htmmyUsers.jsmain.html 全部合二为一文件夹。

main.html中的代码如下:

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>

<script src= "myUsers.js"></script>

</body>
</html>

在 Dreamweaver 中打开 main.html 时可以看到 myUsers_List.htmmyUsers_Form.htm 中的内容,但是当我打开在浏览器中,它是空白的。

有人可以帮我解决这个问题吗?是关于文件路径还是其他问题?谢谢。

最佳答案

当我尝试在 Chrome JavaScript 调试器中检查是否有任何错误时。

由于您的错误是

XMLHttpRequest cannot load file:///C:/Users/Desktop/New%20folder/myUsers_List.htm. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

您似乎需要从网络服务器运行您的 Angular 应用程序,而不是在本地尝试。

关于javascript - AngularJS 包含可重用的 html 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33787271/

相关文章:

javascript - Angular 上有时不出现登录按钮

javascript - 如何使用日期对象作为线性轴的刻度标签?

java - 使用 '<tr onclick=alertContents()>' 从 HTML 表中获取一行内容

jquery for 循环 : for each hovered link show related hidden div next to hovered link

angularjs - $observe 在 AngularJS 中不起作用

javascript - 如何将(kml的路径)替换为变量?我正在使用 geoxml3

javascript - getElementsByClassName 在 IE6 上不起作用。我究竟做错了什么?

java - 在 Java 桌面应用程序中使用 CSS 和 JavaScript

javascript - jQuery - 当我单击加号按钮时,产品数量不会改变

html - 显示父伪的子属性