I am trying to create an angularjs filter that outputs HTML, similar to what is discussed in the link, but I am encountering issues. In my HTML code, I have:
<ul>
<li ng-repeat="book in books | filter:query">
{{book.title}}
<div ng-bind-html="book.snippet"></div>
</li>
</ul>
However, it seems to be displaying only the book titles and not rendering the HTML content inside the "book.snippet" div tag. The controller contains all the necessary data as shown below:
$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—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'
},
The webpage layout appears as follows:
CJS Hayward
Search books:
The Best of Jonathan's Corner
Doxology: The Anthology
The Luddite's Guide to Technology
I'm wondering why only the book title is being displayed without the snippet content. How can I make sure that the snippet content is rendered as HTML properly? All snippets are written as valid XHTML with proper closing tags.
This project is based on the AngularJS phonecat tutorial.
--UPDATE--
After editing the source file, including the necessary scripts for AngularJS sanitization, the script now looks like this:
<script src="/js/angular.min.js"></script>
<script src="/js/angular-sanitize.js"></script>
<script src="/js/controllers.js"></script>
The controllers.js file now starts with:
'use strict';
var authorApp = angular.module('authorApp', ['ngSanitize']);
Despite these updates, the AngularJS code is still failing to render anything else apart from the book titles:
CJS Hayward
Search books:
{{book.title}}
What additional steps should I take? You can find the current state of the app at .