Question

我有以下HTML代码，

的index.html

<li class = "list-group-item" style="margin:50px;" ng-repeat="product in store.products">
      <h3>
              {{product.name}}
<em class="pull-right">{{product.price | currency}}   </em>
      </h3>
</li>

为了了解指令ng-include，我在index.html的同一目录中添加了另一个html。

产品title.html

{{product.name}}
<em class="pull-right">{{product.price | currency}}   </em>

我将index.html更改为

<h3 ng-include="'product-title.html'">
</h3>

但是当我运行索引html时，我没有得到 h3 的详细信息，

请帮我找错。

我的控制器：

var app = angular.module("store", []);
    app.controller('StoreController', function () {
        this.products = gems;
    });



var gems = [
        {
            name: 'Product1',
            price: '2',
            description: 'Bla bla bla',
            images: [...],
            reviews: [...]
        },
{ .....}
];

浏览器错误：

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/Angular%20JS/Source%20Codes/product-title.html'.
at Error (native)
    at file:///D:/Angular%20JS/Source%20Codes/angular.min.js:79:137
    at s (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:74:109)
    at f (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:71:429)
    at L (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:100:187)
    at L (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:100:187)
    at file:///D:/Angular%20JS/Source%20Codes/angular.min.js:101:350
    at k.$eval (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:112:68)
    at k.$digest (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:109:147)
    at k.$apply (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:112:398) angular.min.js:92
(anonymous function) angular.min.js:92
(anonymous function) angular.min.js:68
L angular.min.js:100
L angular.min.js:100
(anonymous function) angular.min.js:101
k.$eval angular.min.js:112
k.$digest angular.min.js:109
k.$apply angular.min.js:112
(anonymous function) angular.min.js:18
d angular.min.js:35
c angular.min.js:18
fc angular.min.js:18
Xc angular.min.js:17
(anonymous function) angular.min.js:214
a angular.min.js:145
(anonymous function) angular.min.js:31
r angular.min.js:7
c

Answer 1

您不应该从index.html加载file:///...。大多数浏览器在从file网址加载数据时都会出现问题，因为它会触发跨站点脚本保护。相反，将您的目录托管在本地Web服务器（如LAMP或nodeJs）上，因此您的文件来自http://localhost/....

Answer 2

解决此问题的另一种方法是使用Microsoft Visual Studio Express for Web创建网站。（此版本免费）。运行网站后，您将获得http://localhost/....

Answer 3

我遇到同样的问题＆＃34; file：//....＆＃34;。
如果您使用的是Mac或Linux，请使用python simplehttpserver运行您的应用程序，而无需安装任何内容。

1. cd [your-project-dir] 2. python -m SimpleHTTPServer

您的应用将在http://localhost:8000/

上运行

AngularJS ng-include问题

3 个答案: