我正在学习 angularjs 的浏览器类(class)，您可以在这里找到:https://www.angularjs.org/
我的主页是“index.html”:
<!DOCTYPE html>
<html ng-app="bookStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<header>
<h1 class="text-center"> BOOKS OF THE MAGIC LIBRARY </h1>
</header>
<div class="list-group">
<div class="list-group-item" ng-repeat="product in store.products">
<h2>{{product.title}} <em class="pull-right">{{product.price | currency}}</em></h2>
<div class="img-wrap">
<img src="{{product.image}}"/>
</div>
<div ng-include="product-description.html">
</div>
<product-decsription></product-description>
</div>
</div>
</body>
</html>
您可以看到，我在上面的代码中尝试了两次以包含第二页，但没有成功。我尝试包含第二页的代码如下(我尝试单独使用 ng-include 和指令，但我得到了相同的结果):
<div ng-include="product-description.html">
</div>
<product-decsription></product-description>
下面是app.js的代码:
(function(){
var app = angular.module('bookStore', []);
app.controller('StoreController', function(){
this.products = books;
});
app.directive('productDescription', function(){
return {
restrict:'E',
templateUrl: 'product-description.html'
}
});
books = [
{
author : "J.K. Rowling",
title: "The prisoner of Azkaban",
description: "the story of an innocent prisoner",
price: 10.50,
image: "hpa.jpg"
},
{
author: "J.K. Rowling",
title: "H.P and the Chamber of Secrets",
description: "the story of a bloody chamber",
price: 8.00,
image: "cos.jpg"
},
{
author: "J.K. Rowling",
title: "H.P and the deathly hollows",
description: "the story fo deathly hollows",
price: 15.00,
image : "dh.jpg"
}
];
})();
以下是“product-description.html”的代码:
<h3>Description</h3>
<blockquote>{{product.description}}</blockquote>
我已将所有这些文件(包括 html 文件和 javascript 文件)放在同一个文件夹中。每次我使用浏览器 (google chrome) 打开文件“index.html”时，我都看不到描述。下图显示了我所看到的:
我曾尝试按照 dfsq 的建议在双引号内的 ng-include 中放置一个单引号，但它不起作用(我仍然得到与上图相同的结果):
<!DOCTYPE html>
<html ng-app="bookStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<header>
<h1 class="text-center"> BOOKS OF THE MAGIC LIBRARY </h1>
</header>
<div class="list-group">
<div class="list-group-item" ng-repeat="product in store.products">
<h2>{{product.title}} <em class="pull-right">{{product.price | currency}}</em></h2>
<div class="img-wrap">
<img src="{{product.image}}"/>
</div>
<div ng-include="'product-description.html'"></div>
</div>
</div>
</body>
</html>
我在运行上述代码的控制台中发现了这些错误:
正如评论和回复所强调的那样，问题是我使用"file"而不是“http”作为协议(protocol)(为此我应该使用网络服务)。我安装了一个集成了 web 服务的 IDE，这样我就解决了这个问题。此外，代码中还有一个小错误:
<img src="bla bla"/>
代替:
<img ng-src="bla bla"/>
我还在等待有人告诉我为什么“http-server”不起作用。我最终会给他最好的答案
最佳答案
您需要在ngInclude 中提供字符串路径，否则它被视为一个表达式。你的情况下正确的代码是(注意路径中的单引号):
<div ng-include="'product-description.html'"></div>
关于javascript - 我不能使用 Angularjs 在我的 index.html 中包含另一个 html 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32807504/