$scope es un objeto de JavaScript que hace referencia a los datos de la aplicación . Tiene propiedades y métodos adjuntos que están disponibles tanto para la vista como para el controlador. Entonces, podemos decir que $scope es la parte vinculante entre la vista HTML y el controlador JavaScript . El $scope tiene todos los datos del modelo necesarios para mostrarse en la vista.
AngularJS es un marco basado en MVC . MVC significa controlador de vista de modelo . MVC se utiliza para aislar la lógica de la aplicación de la capa de interfaz de usuario. El Modelo es responsable de mantener los datos de la aplicación, la vista de mostrar los datos al usuario y el controlador es el código de software y es responsable de las interacciones entre el Modelo y la Vista. El alcance es el modelo.
Acercarse:
-
Al crear un controlador, pase el objeto $scope como argumento.
app.controller("myCrtl",function($scope){}); -
Agregue propiedades al objeto $scope dentro del controlador.
app.controller("myCrtl",function($scope){ $scope.name="GeeksforGeeks"; });
Copie el valor de la propiedad que desea mostrar mediante una expresión vinculante.
<p> Name: {{name}}</p>
Ejemplo 1: Comprender el funcionamiento del alcance
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" ng-controller="myCtrl">
<h1>{{title}}</h1>
<label>Enter a number:</label>
<input type="number" min=0 ng-model="a">
<br><br>
<label>Enter a number:</label>
<input type="number" min=0 ng-model="b">
<br><br>
<button type="button" ng-click="add()">
Add
</button>
<p>Answer: {{answer}}</p>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.a = 0;
$scope.b = 0;
$scope.answer = 0;
$scope.title = "GeeksforGeeks";
$scope.add = function () {
$scope.answer = $scope.a + $scope.b;
};
});
</script>
</body>
</html>
Producción:
Ejemplo 1
Explicación: En este ejemplo, se agregaron varias propiedades al alcance en el controlador «myCtrl». Cuando agrega una propiedad al alcance, la vista obtiene acceso a estas propiedades. Se accede a la propiedad «título» creada en el alcance en la vista usando {{}}. De manera similar, cuando cambia el valor de una propiedad desde la vista, también se refleja en el alcance. El valor de las variables ‘a’, ‘b’ y ‘respuesta’ era inicialmente 0. Cuando el usuario ingresa los dos números y hace clic en el botón «Agregar», el valor de ‘a’, ‘b’ y ‘respuesta’ cambia y se refleja de nuevo en la vista.
Ejemplo 2: Trabajo de ámbito con strings, objetos, funciones
En este ejemplo, en el script, hemos creado un módulo llamado «myApp». Hemos agregado un controlador al módulo llamado «myCtrl». En el controlador, hemos agregado propiedades como una string, función, objeto al $scope . Los valores de las propiedades se muestran en la vista.
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" ng-controller="myCtrl">
<h1>{{title}}</h1>
<form>
<label>Enter first name: </label>
<input type="text" ng-model="firstname">
<br><br>
<label>Enter last name: </label>
<input type="text" ng-model="lastname">
</form>
<p>Name: {{name()}}</p>
<p>Courses:</p>
<ul ng-repeat="x in subjects.courses">
<li>{{x}}</li>
</ul>
<p>Tutorials:</p>
<ul ng-repeat="y in subjects.tutorials">
<li>{{y}}</li>
</ul>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.title = "GeeksforGeeks";
$scope.firstname = "";
$scope.lastname = "";
$scope.name = function () {
return $scope.firstname +
" " +
$scope.lastname;
};
$scope.subjects = {
courses: ["Live Courses",
"Self-Paced Courses",
"School Courses"],
tutorials: ["Practice DS and Algo.",
"Algorithms",
"Data Structure",
"Software Designs",
"CS Subjects"],
};
})
</script>
</body>
</html>
Producción:
Ejemplo 2
El alcance en AngularJS es de naturaleza jerárquica: $rootScope actúa como una variable global. Todos los $scopes de una aplicación AngularJS son elementos secundarios del $rootscope. Una aplicación solo puede tener un $rootScope . Es el alcance que se crea en el elemento HTML que contiene la directiva ng-app y está disponible en toda la aplicación.
Ejemplo 3: comprensión del funcionamiento de $scope y $rootScope.
En este ejemplo, al cargar la aplicación, se crea una propiedad llamada mensaje1 que pertenece a rootScope. También hemos creado un controlador llamado «myCtrl» y hemos agregado una propiedad message2 al alcance.
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>Message: {{message1}}</p>
<div ng-controller="myCtrl">
<p>Message: {{message1}}</p>
<p>Message: {{message2}}</p>
<p>Message: {{message4}}</p>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.run(function ($rootScope) {
$rootScope.message1 =
"This is rootScope message 1.";
$rootScope.message2 =
"This is rootScope message 2."
});
app.controller("myCtrl", function ($scope) {
$scope.message2 = "This is scope message 2.";
$scope.message4 = "This is scope message 4."
});
</script>
</body>
</html>
Producción:
Ejemplo 3
Explicación: Puede observar en el ejemplo anterior que las propiedades pertenecientes a rootScope están disponibles para todos los controladores. Entonces, podemos imprimir «message1» que pertenece a rootScope en el elemento <div> donde se especifica el controlador «myCtrl» ya que rootScope está disponible en toda la aplicación.
Mientras que «message2» se especifica tanto en rootScope como en scope. Cuando el nombre de la variable es el mismo en el ámbito y en el ámbito raíz, la aplicación utiliza el del ámbito actual. Dado que en la etiqueta <div> hemos especificado el controlador «myCtrl», utilizará el valor de «message2» especificado en el alcance.
Podemos decir que $rootscope está disponible para todos los controladores, mientras que $scope está disponible solo para el controlador que lo creó.
Publicación traducida automáticamente
Artículo escrito por divyasharma5d12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA