Directivas Nativas

ng-app: A estas alturas ya conocemos esta directiva, se describi en la entrada anterior,
pero no est de ms incluirla en este pequeo recopilatorio. Lo que hace es identificar la

etiqueta HTML que la contiene como aplicacin AngularJS. Es posible asignarle un
valor, que ser el nombre de nuestra aplicacin (que no tiene por qu ser el mismo
nombre del mdulo).
1
2

<body ng-app="app">

ng-controller: El elemento HTML que contenga esta directiva, tendr como
controlador el valor que conste en la directiva. Por ejemplo, imaginemos que un
elemento div contiene la directiva ng-controller=mainCtrl; en este caso el controlador
mainCtrl hara de manejador de ese elemento.

1
2
3
4

<div ng-controller="mainCtrl">

</div>

ng-init: Segn la documentacin de AngularJS, hoy en da, esta directiva slo sirve
para aplicar desvos especiales en la directiva ng-repeat. La realidad es que actualmente,
esto se puede hacer directamente en la directiva ng-repeat sin necesidad de recurrir a ng-
init; luego lo veremos en los ejemplos. Esta directiva tambin nos sirve para inicializar
variables directamente en la vista, sin necesidad de que sea el controlador quien las
proporcione.

1
2
3
4
5
6
7
8
9
10

<div ng-init="friends = [{name:'Javier', age:'29'},
{name:'Pedro', age:'54'},
{name:'Agustn', age:'10'},
{name:'Rebeca', age:'34'},
{name:'Mara', age:'74'},
{name:'Vctor', age:'48'}]"></div>


<div ng-init="init()">

ng-repeat: Esta directiva nos permite iterar a travs de cualquier enumerable
directamente en la vista, de lo que se deduce que ese enumerable, o array por ejemplo,
debe estar definido en algn lugar, bien utilizando la directiva ng-init, bien incluyendo
la variable en el controlador. Esta directiva tambin se puede utilizar de varias formas
en funcin de lo que ms nos interese.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<ul ng-init="array = ['One', 'Two', 'Three', 'Four']">
<li ng-repeat="item in array">{{item}}</li>
</ul>



<div ng-repeat="element in elements" ng-init="elementIndex = $index">
<h4>{{element.title}}</h4>
<ul>
<li ng-repeat="item in element.list" ng-init="itemIndex = $index">
Element index: {{elementIndex}} ||
Item index: {{itemIndex}} ||
Item content: {{item}}
</li>
</ul>
</div>


<li ng-repeat="item in array track by $index">
Item index: {{$index}} ||
</li>
</ul>


<li ng-repeat="(index, item) in array">
Item index: {{index}} ||
</li>
</ul>

Con la directiva ng-repeat podemos extender el template HTML que se repetir con cada
iteracin haciendo use de las directivas ng-repeat-start y ng-repeat-end, por ejemplo de
la forma que se muestra abajo:

1
2
3
4

<li ng-repeat-start="name in names">{{name}}</li>
<hr ng-repeat-end />
5 </ul>

ng-show / ng-hide: Con estas directivas podemos esconder o mostrar un elemento en
base a una variable o un mtodo definido previamente. En algunas ocasiones, puede ser
interesante utilizar esta directiva. Por ejemplo, si quisiramos mostrar algn elemento
slo en las iteraciones pares, podramos definir una funcin en el controlador que nos
diga si el ndice del elemento es par o no, y aplicarlo con la directiva ng-show o ng-
hide.

1
2
3
4
5
6

<li ng-repeat="(index, item) in array" ng-show="isEven(index)">
Index: {{index}} || Item: {{item}}
</li>
</ul>

ng-class: La directiva ng-class nos permite asignar clases a los elementos HTML de la
pgina, pero tambin podemos pasarle valores a travs de variables que contengan bien
valores true o false, bienstrings con nombres de las classes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.boldText {
font-weight: bold;
}
.redText {
color: red;
}
</style>


<div ng-class="'boldText'">Some text</div>



<div ng-class="someVar">Some text</div>



<div ng-class="{ boldText: boldVar, redText: redVar }">Some text</div>

ng-template / ng-include: Estas dos directivas nos permiten, por un lado definir
templates con ng-template y, por otro, hacer uso de esos templates definidos haciendo
uso de la directiva ng-include. Como veis abajo, el valor para esta directiva se pone
entre comillas simples porque le estamos pasando un string, en lugar de una variable o
un id. La directiva ng-include nos va a venir muy bien para formarlayouts con partes
dinmicas y partes estticas, y adems de templates o plantillas, acepta tambin rutas a
archivos HTML que tengamos en el proyecto..

1
2
3
4
5
6
7
8
9


<script type="text/ng-template" id="partial.html">
<h1>Esto es un template de AngularJS</h1>
<p>Haciendo uso de un controlador, tambin podemos incluir {{variables}}</p>
</script>


<div ng-include="'partial.html'"></div>

ng-model: La directiva ng-model nos permite asignar el valor de un
elemento input, select y/o textareaa una variable definida previamente. Este valor queda
automticamente relacionado con el elemento, de tal forma que si la variable cambia, el
valor del elemento tambin cambiar y, si cambiamos el valor de la variable en el
elemento input, select y/o textarea, cambiar en todo el alcance de la variable.

1
2
3
4


<input type="text" ng-model="someVar" /><br />
<span>{{someVar}}</span>

ng-bind: Con esta directiva hacemos algo parecido a lo que hace ng-model, con la
diferencia de que podemos aplicarlo a cualquier elemento HTML y que no podremos
cambiar el valor de la variable desde el elemento, sino que el valor del elemento se
actualizar cada vez que cambie la variable.

1
2
3
4
5
6


<input type="text" ng-model="someVar" />


<span ng-bind="someVar" />

Bien, quera repasar algunas directivas ms, pero la entrada se est alargando
demasiado. Ahora vamos a ver qu son, cmo se utilizan y para qu podemos utilizar
los filtros de AngularJS.

Directivas Nativas

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Directivas Nativas

Загружено:

Авторское право:

Доступные форматы

ng-app: A estas alturas ya conocemos esta directiva, se describi en la entrada anterior,

pero no est de ms incluirla en este pequeo recopilatorio. Lo que hace es identificar la

Вам также может понравиться