Ámbito de AngularJS
El alcance es la parte vinculante entre HTML (vista) y JavaScript (controlador).
El alcance es un objeto con las propiedades y métodos disponibles.
El alcance está disponible tanto para la vista como para el controlador.
¿Cómo usar el alcance?
Cuando crea un controlador en AngularJS, pasa el $scopeobjeto como argumento:
Ejemplo
Las propiedades realizadas en el controlador se pueden consultar en la vista:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.carname
= "Volvo";
});
</script>
Al agregar propiedades al $scope
objeto en el controlador, la vista (HTML) obtiene acceso a estas propiedades.
En la vista, no usa el prefijo $scope, solo hace referencia a un nombre de propiedad, como {{carname}}.
Comprender el alcance
Si consideramos que una aplicación AngularJS consiste en:
- Ver, que es el HTML.
- Modelo, que son los datos disponibles para la vista actual.
- Controlador, que es la función de JavaScript que crea/cambia/elimina/controla los datos.
Entonces el alcance es el Modelo.
El ámbito es un objeto de JavaScript con propiedades y métodos, que están disponibles tanto para la vista como para el controlador.
Ejemplo
Si realiza cambios en la vista, el modelo y el controlador se actualizarán:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script>
Conozca su alcance
Es importante saber con qué alcance está tratando, en cualquier momento.
En los dos ejemplos anteriores, solo hay un alcance, por lo que conocer su alcance no es un problema, pero para aplicaciones más grandes puede haber secciones en el HTML DOM que solo pueden acceder a ciertos alcances.
Ejemplo
Cuando se trata de la ng-repeatdirectiva, cada repetición tiene acceso al objeto de repetición actual:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.names
= ["Emil", "Tobias", "Linus"];
});
</script>
Cada <li>elemento tiene acceso al objeto de repetición actual, en este caso una cadena, a la que se hace referencia mediante x.
Ámbito raíz
Todas las aplicaciones tienen un $rootScopealcance creado en el elemento HTML que contiene la ng-appdirectiva.
El rootScope está disponible en toda la aplicación.
Si una variable tiene el mismo nombre tanto en el ámbito actual como en el ámbito raíz, la aplicación utiliza la del ámbito actual.
Ejemplo
Existe una variable llamada "color" tanto en el ámbito del controlador como en el ámbito raíz:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is
still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl',
function($scope) {
$scope.color = "red";
});
</script>
</body>