AngularJS Example

by johnwun

HTML

<div ng-app="ngSanitize">
  <div ng-controller="Ctrl">
     Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>
      <table>
        <tr>
          <td>Filter</td>
          <td>Source</td>
          <td>Rendered</td>
        </tr>
        <tr id="html-filter">
          <td>html filter</td>
          <td>
            <pre>&lt;div ng-bind-html="snippet"&gt;<br/>&lt;/div&gt;</pre>
          </td>
          <td>
            <div ng-bind-html="snippet"></div>
          </td>
        </tr>
        <tr id="escaped-html">
          <td>no filter</td>
          <td><pre>&lt;div ng-bind="snippet"&gt;<br/>&lt;/div&gt;</pre></td>
          <td><div ng-bind="snippet"></div></td>
        </tr>
        <tr id="html-unsafe-filter">
          <td>unsafe html filter</td>
          <td><pre>&lt;div ng-bind-html-unsafe="snippet"&gt;<br/>&lt;/div&gt;</pre></td>
          <td><div ng-bind-html-unsafe="snippet"></div></td>
        </tr>
      </table>
    </div>
</div>

CSS

.ng-invalid { border: 1px solid red; }​

JavaScript

function Ctrl($scope) {
  $scope.snippet =
    '<p style="color:blue">an html\n' +
    '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
    'snippet</p>';
}