我无法使用Angularjs在index.html中包含另一个html页面

Question

我正在跟踪angularjs的浏览器课程，您可以在这里找到： 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>

我在运行上述代码的控制台中发现了这些错误：

正如评论和答复所强调的，问题是我使用“文件”作为协议而不是“ http”（为此我应该使用Web服务）。 我已经安装了具有集成Web服务的IDE，因此我已经解决了该问题。 Moroever，代码中还有另一个小错误：

<img src="bla bla"/>

代替：

<img ng-src="bla bla"/>

我仍在等待有人可以告诉我为什么“ http-server”不起作用。 最终我会给他最好的答案

Answer 1

您需要在ngInclude中提供一个字符串路径，否则将其视为表达式。 您的情况下正确的代码是（请注意路径中的单引号）：

<div ng-include="'product-description.html'"></div>

Answer 2

正如评论和答复所强调的，问题是我使用“文件”作为协议而不是“ http”（为此我应该使用Web服务）。 我已经安装了具有集成Web服务的IDE，因此我已经解决了该问题。 Moroever，代码中还有另一个小错误：

<img src="bla bla"/>

代替：

<img ng-src="bla bla"/>

我无法使用Angularjs在index.html中包含另一个html页面

问题描述

2 个解决方案

解决方案1
2 2015-09-27 11:51:59

解决方案2
0 已采纳 2015-09-27 17:49:44

我无法使用Angularjs在index.html中包含另一个html页面

问题描述

2 个解决方案

解决方案1 2 2015-09-27 11:51:59

解决方案2 0 已采纳 2015-09-27 17:49:44

解决方案1
2 2015-09-27 11:51:59

解决方案2
0 已采纳 2015-09-27 17:49:44