AngularJS Scope (ámbito)

Scope (ámbito) es el vínculo entre HTML (vista) y JavaScript (controlador).

Scope es un objeto que tiene métodos y propiedades disponibles.

Scope se puede aplicar en la vista y en el controlador.

Cómo usar Scope

Cuando creas un controlador en AngularJS, puedes pasar el$scopeobjeto como parámetro:

Ejemplo de AngularJS

Las propiedades del controlador corresponden a las propiedades de 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>

Pruébalo »

Cuando agregas el$scopeobjeto, la vista (HTML) puede obtener estas propiedades.

En la vista, no necesitas agregar el$scopeprefijo, solo necesitas agregar el nombre de la propiedad, por ejemplo:{{carname}}。

Resumen de Scope

Una aplicación de AngularJS se compone de lo siguiente:

  • View (vista), es decir, HTML.
  • Model (modelo), los datos disponibles en la vista actual.
  • Controller (controlador), es decir, una función de JavaScript, que puede agregar o modificar propiedades.

scope es el modelo.

scope es un objeto de JavaScript con propiedades y métodos, y estas propiedades y métodos se pueden usar en la vista y en el controlador.

Ejemplo de AngularJS

Si modificas la vista, el modelo y el controlador también se actualizarán en consecuencia:

<div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h1>{{greeting}}</h1> <button ng-click='sayHello()'>Haz clic</button> </div> <script>
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "Ejemplo"; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.name + '!'; }; });
</script>

Pruébalo »

Alcance de Scope

Es muy importante saber qué scope estás usando actualmente.

En los dos ejemplos anteriores, solo hay un scope, así que es relativamente simple de manejar, pero en proyectos grandes, hay múltiples scopes en el DOM HTML; entonces necesitas saber cuál es el ámbito correspondiente al scope que estás usando.

Ejemplo de AngularJS

Cuando usamos lang-repeatdirectiva, cada elemento repetido accede al objeto repetido 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>

Pruébalo »

Cada<li>elemento puede acceder al objeto repetido actual, que aquí corresponde a una cadena, y usa la variablexpara representarlo.

Scope raíz

Todas las aplicaciones tienen un$rootScope, que puede actuar sobreng-apptodos los elementos HTML incluidos en la directiva.

$rootScopePuede actuar en toda la aplicación. Es el puente entre los scopes de cada controlador. Los valores definidos con rootScope se pueden usar en cada controlador.

Ejemplo de AngularJS

Al crear un controlador, pasa $rootScope como parámetro y se puede usar en la aplicación:

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}}Miembros de la familia:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

Pruébalo »
Otras extensiones