El ámbito de aplicación es la parte de unión entre el HTML (ver) y el código JavaScript (controlador).
El ámbito de aplicación es un objeto con las propiedades y métodos disponibles.
El ámbito de aplicación está disponible tanto para la vista y el controlador.
Cómo usar el Alcance?
Cuando haces un controlador en AngularJS, se pasa el $scope objeto como un argumento:
Ejemplo
Propiedades realizados en el controlador, puede hacer referencia a 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> Inténtalo tú mismo " Al añadir propiedades a la $scope objeto en el controlador, la vista (HTML) tiene acceso a estas propiedades.
En la vista, no se utiliza el prefijo $scope , que sólo se refiere a un propertyname, como {{carname}} .
Comprender el alcance
Si consideramos una aplicación AngularJS consistir en:
- Ver, que es el HTML.
- Modelo, que son los datos disponibles para la vista actual.
- Controller, que es la función de JavaScript que hace / cambios / elimina / controla los datos.
A continuación, el ámbito de aplicación es el Modelo.
El ámbito de aplicación es un objeto JavaScript con propiedades y métodos, que están disponibles tanto para la vista y el controlador.
Ejemplo
Si se realizan 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> Inténtalo tú mismo " Conozca a su Alcance
Es importante saber qué alcance se trata de, en cualquier momento.
En los dos ejemplos anteriores sólo hay una ámbito de aplicación, por lo que conocer su alcance no es un problema, pero para aplicaciones más grandes hay secciones adicionales en el DOM de HTML que sólo pueden acceder a ciertos ámbitos.
Ejemplo
Cuando se trata de la ng-repeat Directiva, 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>
Inténtalo tú mismo " Cada <li> elemento tiene acceso al objeto de repetición actual, en este caso una cadena, que se denomina mediante el uso de x .
Alcance de la raíz
Todas las aplicaciones tienen un $rootScope que es el ámbito creado en el elemento HTML que contiene el ng-app Directiva.
El rootScope está disponible en toda la aplicación.
Si una variable tiene el mismo nombre tanto en el ámbito actual y en el rootScope, la aplicación usar el uno en el ámbito actual.
Ejemplo
Una variable llamada "color" existe en el ámbito de aplicación tanto del controlador y en el rootScope:
<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> Inténtalo tú mismo "