AngularJs(Part 7)--Build-in Directives
Directives
In AngularJS, we can use a variety of naming conventions to reference directives .
In the AngularJS documentation, all the directive are indexed under their camel-case name
(For example, ngModel). In a template, howeven, we need to use either snake-case form(ng-model),
colon-separated(ng:model) or the underscore-separated(ng_model) form. Addtionally, each reference to
a directive can be prefixed with either x- or data-.
the interpolation directive--- {{}}
and it has an equivalent directive called ng-bind. Usually the ng-bind directive is used to hide
expressions before AngularJS has a chance of processing them on the initial page load.
the interpolation directive will do escaping of any HTML content found in the model in order to prevent
HTML injection attacks. for example :
$scope.msg="hello,<b>world</b>";
and the markup fragment:
<span>{{msg}}</span>
the result will be <span>hello,<b>world</b></span>
if,for any reason, you 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.
<span ng-bind-html-unsafe="msg"></span>
but, there is also a third option: ng-bind-html. this directive is a compromise between behavior of the
ng-bind-html-unsafe(allow al HTML tags) and the interpolation directive(allow no HTML tags at all).you can
use ng-bind-html where you want to allow some HTML tags.
ng-bind-html directive resides in a separate module (ngSanitize) and require inclusion of an addtional
source file:angular-sanitize.js.
Don't forget to declare dependency on the ngSanitize module if you plan to use the ng-bind-html directive.
Conditional display
Showing and hiding parts of the DOM based on some conditions is a common requirement.
AngularJS is equipped with four different sets of directive fot this occasion(ng-show/ng-hide,
ng-switch-*,ng-if and ng-include)
ng-show/ng-hide
<div ng-show="showSecret"></div>
this div will show when showSecret is true and hide when showSecret is false.
ng-switch-*
If we want to physically remove or add DOM nodes conditionally , the family of ng-switch directives will come
handy:
<div ng-switch on="showSecret">
<div ng-switch-when="1">Secret1</div>
<div ng-switch-when="2">Secret2</div>
<div ng-switch-default>won't show my secrets!</div>
</div>
ng-if
Just like other if in other languages,
<div ng-if="showSecret">Secret</div>
ng-include
The ng-include directive can be used to conditionally display blocks of dynamic, AngularJS-powered markup.
<div ng-include="user.admin && 'edit.admin.html' || 'editor.user.html'"></div>
ng-include accepts an string as its argument. so it must be something like ng-include=" 'a.html' "
ng-repeat
$index starts with 0
$first, $middle,$last return a boolean
using ng-repeat , we can iterate over properties of an object. check the following code:
<li ng-repeat="(name,age) in user">
<span>{{name}} 's age is {{age}}</span>
</li>
but in this case, we can't control iteration order.
There is a slight problem with ng-repeat directive: it need a container element to repeat. For example, if I
want to repeat two rows in a table, it must be
<table>
<tbody ng-repeat="user in users">
<tr>{{user.name}}</tr>
<tr>{{user.age}}</tr>
</tbody>
</table>