| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Example - example-example67-jquery</title> |
| |
| |
| <script src="../../components/jquery-1.10.2/jquery.js"></script> |
| <script src="../../../angular.js"></script> |
| <script src="../../../angular-sanitize.js"></script> |
| |
| |
| |
| </head> |
| <body ng-app="ngSanitize"> |
| <script> |
| function Ctrl($scope, $sce) { |
| $scope.snippet = |
| '<p style="color:blue">an html\n' + |
| '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' + |
| 'snippet</p>'; |
| $scope.deliberatelyTrustDangerousSnippet = function() { |
| return $sce.trustAsHtml($scope.snippet); |
| }; |
| } |
| </script> |
| <div ng-controller="Ctrl"> |
| Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea> |
| <table> |
| <tr> |
| <td>Directive</td> |
| <td>How</td> |
| <td>Source</td> |
| <td>Rendered</td> |
| </tr> |
| <tr id="bind-html-with-sanitize"> |
| <td>ng-bind-html</td> |
| <td>Automatically uses $sanitize</td> |
| <td><pre><div ng-bind-html="snippet"><br/></div></pre></td> |
| <td><div ng-bind-html="snippet"></div></td> |
| </tr> |
| <tr id="bind-html-with-trust"> |
| <td>ng-bind-html</td> |
| <td>Bypass $sanitize by explicitly trusting the dangerous value</td> |
| <td> |
| <pre><div ng-bind-html="deliberatelyTrustDangerousSnippet()"> |
| </div></pre> |
| </td> |
| <td><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></td> |
| </tr> |
| <tr id="bind-default"> |
| <td>ng-bind</td> |
| <td>Automatically escapes</td> |
| <td><pre><div ng-bind="snippet"><br/></div></pre></td> |
| <td><div ng-bind="snippet"></div></td> |
| </tr> |
| </table> |
| </div> |
| </body> |
| </html> |
