YouTipThis is bold and blue text.
' + ''; }]); ``` #### 3. Bind in the Template ```htmlNg Ng Bind Html
## Introduction
In Angular (specifically AngularJS / Angular 1.x), rendering raw HTML strings directly into the DOM can be challenging due to built-in security mechanisms designed to prevent Cross-Site Scripting (XSS) attacks.
The `ng-bind-html` directive is the standard solution for binding and rendering HTML content dynamically within your templates. It evaluates an expression and securely inserts the resulting HTML into the target element.
This comprehensive guide covers the syntax, usage, security considerations, and practical examples of using `ng-bind-html` in your applications.
---
## Syntax and Usage
The `ng-bind-html` directive instructs AngularJS to replace the inner content of an HTML element with the evaluated HTML string.
### Basic Syntax
```html
```
* **`expression`**: An expression that evaluates to an HTML string.
### The Security Requirement: `$sanitize` and `$sce`
By default, AngularJS does not allow you to bind raw HTML strings directly using `ng-bind-html` without explicit security clearance. If you attempt to bind a raw string without configuring security, AngularJS will throw an error: `[$sce:unsafe] Attempting to use an unsafe value in a safe context`.
To resolve this, you have two primary approaches:
1. **Using the `ngSanitize` module (Recommended)**: Automatically parses the HTML and strips out unsafe elements (like `
```
#### 2. Configure the Module and Controller
```javascript
// Inject 'ngSanitize' as a dependency
var app = angular.module('htmlApp', ['ngSanitize']);
app.controller('HtmlController', ['$scope', function($scope) {
// This HTML contains both safe tags and an unsafe script tag
$scope.htmlContent = '
```
---
### Method 2: Using `$sce` to Trust Raw HTML (Bypass Sanitization)
If you need to render complex HTML (such as `