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>

但它只显示书名，就像＆lt; div ng-bind-html ...＆gt;不在那里。控制器具有所有需要的数据，从：

开始

$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，关闭＆lt; / p＆gt;标签等。

该项目旨在成为AngularJS phonecat教程的一员。

- UPDATE -

谢谢你，@ 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没有重复任何事情（我在控制台.logs中看不到任何新内容）：

CJS Hayward

Search books:

    {{book.title}}

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

Answer 1

为了使ng-bind-html指令起作用，$ sanitize服务必须可用。您是否在应用中添加了ngSanitize模块以及ng-sanitize.js脚本？

Answer 2

在开发人员工具中简要介绍一下你的代码之后，我可以看到你正在使用Angular 1.3版（beta5）的angular-sanitize.js。但是你的angular.js脚本是在1.2版本中。我猜测问题在于这个版本不匹配。请尝试使用相同1.3版本的angular.js脚本，看看是否有效。你可以找到它here。

为什么这个AngularJS数据绑定不起作用？

2 个答案: