Cargando



Datos del modelo y alcance en AngularJS

En este tutorial vamos a profundizar en el alcance de los datos del modelo en AngularJS.


ago 15 2014 02:58
Avanzado
ago 21 2014 11:51
Cuando hablamos del alcance de un modelo, hablamos del objeto $scope, este es el encargado de mostrar los datos del modelo a las vistas, con ello podremos conectar las diferentes partes de nuestra estructura MVC.

En AngularJS los datos se consideran parte del modelo solo cuando son visibles por el objeto $scope, este objeto es el alcance o ámbito que debemos utilizar para poder ver los cambios que se puedan producir en nuestro modelo.

Asignando valores de forma explícita


Cuando trabajamos con el objeto $scope, muchas veces podemos hacer una asignación de valores de forma explícita, de tal manera que podemos simular dentro de un controlador la recepción de un dato de algún modelo.

Al asignar dicho dato o valor al $scope, este puede ser utilizado dentro de la vista, independientemente de su origen, como puede ser un modelo o una asignación explicita que hemos dicho.

Veamos en el siguiente ejemplo como podemos plasmar lo que hemos venido comentando en un código simple de AngularJS:

<html ng-app>
<head>
<script src="https:/ /ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script>

function ContadorController($scope) {
$scope.setContador = function() {
$scope.contador =3;
}
}

</script>
</head>
<body>
<div ng-controller='ContadorController'>
<button ng-click='setContador ()'>Establecer la cuenta en 3</button>
<p>{{contador}}</p>
</div>

<button ng-click='contador =3'>Establecer la cuenta en 3</button>
<p>{{contador}}</p>
</body>
</html>


En el ejemplo vemos que en nuestro contenido de controlador estamos estableciendo el valor de una propiedad de forma explícita, con ello podemos pasar el valor del objeto $scope a la vista; en la siguiente sección hemos creado un botón que invoca el método del controlador. Finalmente hacemos un nuevo botón que hace la asignación de forma explícita y tenemos un código que es equivalente.

Con lo escrito en el ejemplo logramos lo siguiente en nuestro navegador:


Vemos que ambas opciones nos permite ejecutar la función principal que hemos diseñado de establecer un contador que se establezca en tres.

ng-model
Otro aspecto que podemos colocar es construir un formulario utilizando la propiedad ng-model, con ello podremos lograr una unión bidireccional entre ambos elementos, es decir, entre el formulario y el modelo en cuestión; con ello pueden trabajar dentro del ámbito del controlador que los engloba.


Método watch()


El método watch() es quizás uno de los más utilizados en AngularJS, ya que con él podemos detectar en tiempo real los cambios que puedan afectar nuestros modelos y con dichos cambios ejecutar acciones dentro de nuestra aplicación.

De hecho podemos observar un objeto en particular o tal vez el resultado de algún método, lo importante es que podemos utilizar este método en un amplio espectro de lo que Javascript representa en el navegador. La forma en la que podemos aplicar este método es la siguiente:

$watch(watchFn, watchAction, deepWatch)

Estos parámetros que recibe el método nos permite indicar el modelo a tener en cuenta, el método a ejecutar cuando hay un cambio o condición que hayamos establecido y con ello podremos cumplir muchas de las necesidades que tengamos en cuanto al seguimiento de los cambios del modelo

Con esto finalizamos este tutorial, ya tenemos una introducción a lo que representa el alcance de los datos en nuestros modelos en una aplicación hecha con AngularJS.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X