Chapter 4
myModule.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});Here we are changing default {{}} to [[]] so later on we can write in the templates:
[[expression]]Rendering model values with ngBind
The interpolation directive has an equivalent directive called ng-bind. It can be used
as an HTML attribute:
<span ng-bind="expression"></span>The curly braces form is easier to use but there are cases where the ng-bind directive
might come handy. Usually the ng-bind directive is used to hide expressions before
AngularJS has a chance of processing them on the initial page load. This prevents
UI flickering and provides better user experience. The topic of optimizing the initial
page load is covered in more details in Chapter 12, Packaging and Deploying AngularJS
Web Applications.
HTML content in AngularJS expressions
By default AngularJS will escape any HTML markup that made it into an expression
(model) evaluated by the interpolation directive. For example, given the model:
$scope.msg = 'Hello, <b>World</b>!';And the markup fragment:
<p>{{msg}}</p>The rendering process will escape the tags, so they will appear as plain text and
not as markup:
<p>Hello, <b>World</b>!</p>The interpolation directive will do the escaping of any HTML content found in the
model in order to prevent HTML injection attacks.
If, for any reason, your model contains HTML markup that needs to be evaluated
and rendered by a browser you can use the ng-bind-html-unsafe directive to
switch off default HTML tags escaping:
<p ng-bind-html-unsafe="msg"></p>