标签:des style blog class code c
Directives are one of the most powerful of AngularJS. They allow us to extend HTML to answer the needs of web applications. Directives could specify how your page should be sructured for the data available a given scope.
First let’s have a look at how directives are working.
AngularJS has several directives which
could build our basic application. The first directive “ngRepeat”
is used mostly. It create a new set of elements in the dom for each element in a
collection.
Example:
<div> <div data-ng-repeat="user in users"> <h3>{{user.name}}<h3> <p>{{user.description}}</p> </div> </div>
<script>
angularJSApp.controller(‘UserCtrl‘, [‘$scope‘, function($scope) {
$scope.users = [
{
name: ‘Tyrion‘,
description: ‘yongest son of lord Tywin‘,
gender: ‘male‘,
house: ‘Lannister‘
},
{
name: ‘Daenerys‘,
description: ‘Only daughter of Aerys II‘,
gender: ‘female‘,
house: ‘Targaryen‘
},
{
name: ‘Arya‘,
description: ‘Younger daughter of Eddard‘,
gender: ‘female‘,
house: ‘Stark‘
},
{
name: ‘Jon‘,
description: ‘Bastard Son of lord Eddard‘,
gender: ‘male‘,
house: ‘Stark‘
}
];
}]);
</srcipt>
The actual effect of display
Tyrion
yongest son of lord
Tywin Daenerys
Only daughter of Aerys II
Arya
Younger daughter of Eddard
Jon Bastard
Son of lord Eddard
In this example, The result exactly what we were expecting, a new div has been created for each of my entity with their name as title and threir description in a paragraph.
Note:
For those who are wondering why I have prefixed “ng-repeat” by “data-“, Please have a look here
Angular determine if an element should be displayed or not with the directive “ngShow“. This directive used an expression which returns a boolean to determine if the element should be displayed or not.
Example:
<div> <div data-ng-repeat="user in users" data-ng-show="user.gender == ‘female‘"> <h3>{{user.name}}<h3> <p>{{user.description}}</p> </div> </div>
The actual effect of display
Daenerys
Only daughter of Aerys II
Arya
Younger daughter of Eddard
AS we can see in the result, only females are displayed. If you inspect the dom, we would see that the other elements have been computed but their are just hidden(display = none).
AngularJS also contains more complex directive like “ngSwitch“.
For example:
<div ng-controller="UserCtrl"> <div data-ng-repeat="user in users" data-ng-show="user.gender == ‘female‘" data-ng-switch="user.house"> <h3>{{user.name}}<h3> <p>{{user.description}}</p> Sigil: <img src="images/targaryen.png" data-ng-switch-when="Targaryen"> <img src="images/stark.png" data-ng-switch-when="Stark"> <img src="images/lannister.png" data-ng-switch-when="Lannister"> </div> </div>
Using these directives, we have ability to define the basic structure of our
web application very easily.
In fact, There are many Directives in
AngularJS. I intruducted only a little. HERE list
the integrated directives.
You can download the source code of examples.
Example
code
AngularJS tutorial
Written By smaltdd@gmail.com
05/15/2014
AngularJS tutorial - Lesson 2,布布扣,bubuko.com
标签:des style blog class code c
原文地址:http://www.cnblogs.com/smaltdd/p/3730840.html