Uno de los principales usos del modelo en una aplicación MVC es proporcionar los datos que se muestran en la vista e implementar las funciones invocadas desde la vista. En una aplicación AngularJS las declaraciones de enlace de datos se evalúan en relación con el alcance actual. Con un controlador que tiene este aspecto, el objeto $scope que se crea y gestiona es el alcance actual del controlador y estará disponible para su enlace en la vista.
123456789101112angular.module("hackApp").controller("todoController",function($scope){ $scope.description="Una lista de cosas para hacer."; $scope.todos=[]; $scope. newTodo={"title":"", "completed":false}; $scope.addTodo=function(){var toAdd ={"title":$scope.newTodo.title, "completed":$scope.newTodo.completed}; $scope.todos.push(toAdd);};});javascript
Cuando usamos una sintaxis como la siguiente en la correspondiente vista AngularJS, las expresiones de la declaración vinculante se evalúan frente al objeto de alcance que fue manipulado en el controlador.
123456789101112<divng-controller="todoController"<span;{{{descripción}}</span;};form;³³³$0027labelfor="newTodo"``Tarea:</label;³³³$0027inputtype="text "placeholder="New Task "ng-model="newTodo. title"/;buttonng-click="addTodo() "value="Add">Add</button ></form><ul;;ling-repeat="todo in todos"->;inputtype="checkbox "ng-model="todo. complete"/{{{{{{todo.title}}</li>³³³³³ul³³³³³³³³³ón de la página web ³³³³³ón de la página web ³³³ón de la página web ³³³".
html
Fíjese que el campo "descripción" que se estableció en el objeto $scope puede ser referenciado en la plantilla usando la simple expresión que contiene su nombre. Para la entrada para crear un nuevo elemento To Do, se utiliza el atributo ng-model. Indica que la entrada debe estar vinculada al campo "título" del "nuevoTodo" que se aplicó al $scope. De la misma manera, el atributo ng-click se utiliza para enganchar el evento de clic del botón a la función addTodo que se definió en el ámbito.
En esta vista hay en realidad varios alcances, aunque sólo hay un controlador. La aplicación tiene el $rootScope que está disponible para la página. El controlador crea un ámbito hijo y el ng-repeat, que creará un elemento LI para cada elemento de la lista de elementos por hacer. También crea un nuevo ámbito para cada elemento. Cada ámbito hijo de los elementos de la lista tiene el ámbito del controlador establecido como ámbito padre y tiene el campo "todo" poblado con el valor que se está iterando actualmente.
En la repetición, puede ser necesario acceder a los datos del ámbito principal, el ámbito del controlador. Una forma de hacerlo sería utilizar la propiedad especial $parent en el ámbito actual para alcanzar un nivel y acceder a los datos del ámbito superior. En este ejemplo, se accede a la matriz "todos" utilizando $parent.todos.
123456<ul><ling-repeat="todo in todos"³;<inputtype="checkbox "ng-model="todo.complete"/> {{{todo.title}} ({{$index + 1}} de {{$parent.todos.length}})
html
Resulta que usar la propiedad de los padres no es necesario en este caso. El enlace de datos AngularJS mira primero el alcance actual del campo al que se hace referencia en la expresión. Si el campo no se encuentra en el ámbito actual, AngularJS buscará el ámbito padre del campo. Así que el ejemplo anterior podría modificarse al siguiente y seguir funcionando.
1 {{todo.título}} ({{$index + 1}} de {{todos.longitud}})html
Esta característica hace que el enlace de la base de datos al estado en el ámbito padre sea mucho más fácil e incluso más intuitivo en el caso del escenario de repetición. Un caso en el que el uso explícito del campo $padre es importante es si el alcance actual y el padre tienen ambos un campo con el mismo nombre. Si desea mostrar el valor del padre, entonces la referencia $parent se hace necesaria.