En este artículo, entenderemos qué es el alcance en Angular JS y cómo usar Scope. El alcance en Angular JS es la parte vinculante entre HTML (vista) y JavaScript (controlador) y es un objeto integrado. Contiene datos y objetos de la aplicación. Está disponible tanto para la vista como para el controlador. Es un objeto con propiedades y métodos disponibles. Hay dos tipos de ámbitos en Angular JS.
- $alcance
- $rootScope
¿Cómo usar el Alcance?
Cuando creamos un controlador en AngularJS, pasaremos el objeto $scope como argumento. En AngularJS, crea e inyecta un objeto $scope diferente en cada controlador de una aplicación. Por lo tanto, no se puede acceder a los datos y métodos adjuntos a $scope dentro de un controlador en otro controlador. En medio del controlador anidado, el controlador secundario adquirirá el objeto de alcance del controlador principal. En consecuencia, el controlador secundario puede acceder a las propiedades agregadas al controlador principal, pero el controlador principal no puede acceder a las propiedades anexadas al controlador secundario.
Entendiendo el Alcance: Si vemos una aplicación AngularJS que consta de:
- La vista HTML.
- Modelo, los datos que están disponibles para la vista actual.
- Controlador, la función de JavaScript que crea/cambia/elimina/controla los datos.
El alcance es el modelo y es un objeto de JavaScript con propiedades y métodos que están disponibles tanto para la vista como para el controlador.
Ejemplo 1: En este ejemplo, veremos el uso del objeto $scope y también veremos cómo se transfieren los datos desde el controlador al componente de vista que se procesa mediante interpolación.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="gfg" ng-controller="myCtrl">
<h1>{{organisation}}</h1>
</div>
<p>
The property "organisation" was made in
the controller, and can be referred to
in the view by using the {{ }} brackets.
</p>
<script>
var geeks = angular.module("gfg", []);
geeks.controller("myCtrl", function($scope) {
$scope.organisation = "GeeksforGeeks";
});
</script>
</body>
</html>
Producción:
Las propiedades creadas por el controlador se pueden consultar en la vista.
Ejemplo 2: En el ejemplo 1, hemos utilizado un único ámbito, pero para aplicaciones más grandes, que puede ser una sección en el DOM de HTML que puede acceder a determinados ámbitos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>AngularJS | Scope</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="gfg" ng-controller="control">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var geeks = angular.module("gfg", []);
geeks.controller("control", function($scope) {
$scope.names = [
"DSA Learning",
"Algorithm Learning",
"Web Technology",
];
});
</script>
</body>
</html>
Producción:
En el ejemplo anterior, solo hay un ámbito; en el ejemplo siguiente, verá más de un ámbito.
Ámbito raíz: el ámbito raíz es un ámbito que se crea en el elemento HTML que tiene la directiva ng-app y está contenido en todas las aplicaciones. La disponibilidad del ámbito raíz está en toda la aplicación.
Ejemplo 3: si se declara alguna variable con el mismo nombre en el ámbito actual y el ámbito raíz, la aplicación utilizará el ámbito actual. En este ejemplo, veremos cómo el ámbito actual utiliza la variable denominada «color».
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<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>
<p>
Note that the color variable in controller
does not overwrite the color value in
rootScope.
</p>
<script>
var app = angular.module("myApp", []);
app.run(function($rootScope) {
$rootScope.color = "turquoise";
});
app.controller("myCtrl", function($scope) {
$scope.color = "salmon";
});
</script>
</body>
</html>
Producción:
Existe una variable denominada «color» tanto en el ámbito del controlador como en el ámbito raíz.
Publicación traducida automáticamente
Artículo escrito por arelemegha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA