I want to show a repeated list, and render each element with ngSanitize as follows:
<div ng-repeat="todo in todos" ng-bind-html="todo.text"/>
I get no error in the console, but I also don't get any output. Why?
By the way: the following does actually work, but unformatted markup:
<div ng-repeat="todo in todos">{{todo.text}}</div>
I think there were a few mistakes in your code. The example below should help you further. Remember, Angular doesn't support self closing <div>-tags.
HTML
<div ng-app="myApp" ng-controller="myAppCtrl">
<div ng-repeat="todo in totos" ng-bind="todo.text"></div>
</div>
JS
angular.module("myApp", [])
.controller("myAppCtrl", function($scope) {
$scope.todos = [
{name: "todo1", text: "This is test todo 1"},
{name: "todo2", text: "This is test todo 2"},
{name: "todo3", text: "This is test todo 3"}
]
});
JSFiddle: https://jsfiddle.net/ABr/38foxe31/
<div>-tag is not self closing" Except in XHTML, but very few people use XHTML anymore...
<div .../>, but must use the explicit tag again like <div ...></div> even if the text between the divs is empty?I have created a plunker and tried to replicate your problem, but everything is working fine.
A couple of things to consider:
1) Have you loaded angular-sanitize in your index file? (before app.js)
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-sanitize.js"></script>
2) Have you correctly injected ngSanitize in your module?
angular.module('app', ['ngSanitize']);
</div> tag.
todosand nottotos? Also, close the quotes on yourng-repeat.ng-bind-htmland not justng-bind?textcontains html markup elements like<strong>test text</strong>. docs.angularjs.org/api/ng/directive/ngBindHtml