javascript - 为什么这个 AngularJS 数据绑定(bind)不起作用？

Question

How to create angularjs filter which outputs HTML看起来像我想要的，但我的版本还不能工作。在我的 HTML 中，我有:

    <ul>
        <li ng-repeat="book in books | filter:query">
            {{book.title}}
            <div ng-bind-html="book.snippet"></div>
        </li>
    </ul>

但它只显示书名，就好像

不存在一样。 Controller 拥有所有所需的数据，从以下开始:

$scope.books = [
        {
        'image': '/images/the_best_of_jonathans_corner_full.jpg',
        'snippet': '<p>If you read just one book from this site, <em>The Best of Jonathan\'s Corner</em> is a head taller than the others. It contains   all of the best works of theology from Jonathan\'s Corner, and there\'s a lot to dig through&mdash;but only if you want. If not, feel free to enjoy and read  as little or as much as you like.</p><p>This book is the author\'s favorite title out of all the books sold from this site.</p>',
        'title': 'The Best of Jonathan\'s Corner',
        'url': '/redirect/the_best_of_jonathans_corner.html'
        }, 

网页看起来像:

CJS Hayward

Search books:

    The Best of Jonathan's Corner
    Doxology: The Anthology
    The Luddite's Guide to Technology 

为什么出现了 book.title 而没有出现 book.snippet？我的一些代码片段中有 HTML，我希望它们将代码片段呈现为 HTML。 (我可以将转义版本设置为 {{book.snippet}}，但我想知道此处处理 HTML(非)转义的正确方法。)所有片段都应编写为严格有效的 XHTML，带有结束

标签等。

该项目旨在成为 AngularJS Phonecat 教程的一个补充。

--更新--

谢谢你，@ppa；我已编辑源文件以包括:

    <script src="/js/angular.min.js"></script>
    <script src="/js/angular-sanitize.js"></script>
    <script src="/js/controllers.js"></script>

controllers.js 现在开始:

'use strict';

var authorApp = angular.module('authorApp', ['ngSanitize']);

AngularJS 没有重复任何内容(并且我在 console.logs 中没有看到任何新内容):

CJS Hayward

Search books:

    {{book.title}}

我还应该包括什么？该应用程序目前位于 http://new.cjsh.name .

最佳答案

在开发者工具中简要查看您的代码后，我可以看到您正在使用 Angular 版本 1.3(beta5) 的 angular-sanitize.js。但你的 angular.js 脚本是 1.2 版本。我猜测问题出在这个版本不匹配上。请尝试使用同一 1.3 版本中的 angular.js 脚本，看看是否有效。可以找到here .

关于javascript - 为什么这个 AngularJS 数据绑定(bind)不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23117337/

Answer 1

在开发者工具中简要查看您的代码后，我可以看到您正在使用 Angular 版本 1.3(beta5) 的 angular-sanitize.js。但你的 angular.js 脚本是 1.2 版本。我猜测问题出在这个版本不匹配上。请尝试使用同一 1.3 版本中的 angular.js 脚本，看看是否有效。可以找到here .