Scope de AngularJS

El ámbito (scope) es la parte que une HTML (vista) y JavaScript (controlador).

El ámbito es un objeto que tiene propiedades y métodos disponibles.

El ámbito está disponible tanto para la vista como para el controlador.

¿Cómo usar el ámbito?

Cuando creas un controlador en AngularJS, vas a $scope El objeto se pasa como parámetro:

Ejemplo

Las propiedades creadas en el controlador pueden ser citadas 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>

Prueba personalmente

Cuando se añade en el controlador de}} $scope al agregar propiedades al objeto, la vista (HTML) puede acceder a estas propiedades.

En la vista, no se usa $scope El prefijo, con el que solo necesita referirse al nombre de una propiedad, por ejemplo {{carname}}。

Entender el ámbito

Si consideramos la aplicación AngularJS como compuesta por los siguientes componentes:

  • La vista, que es HTML.
  • El modelo, que es los datos disponibles para la vista actual.
  • El controlador, que es una función JavaScript, se utiliza para crear/cambiar/eliminar/controlar datos.

Entonces el ámbito es el modelo.

El ámbito es un objeto JavaScript que tiene propiedades y métodos, que están disponibles para la vista y el controlador.

Ejemplo

Si realiza un cambio en la vista, el modelo y el controlador se actualizarán:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>Mi nombre es {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

Prueba personalmente

Entender su ámbito

Es importante entender el ámbito que está manejando en cualquier momento.

En los dos ejemplos anteriores, hay solo un ámbito, por lo que entender su ámbito no es un problema, pero para aplicaciones más grandes, ciertas partes del HTML DOM pueden solo acceder a ciertos ámbitos.

Ejemplo

Al procesar la instrucción ng-repeat, cada repetición puede acceder 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>

Prueba personalmente

Cada <li> Los elementos pueden acceder al objeto repetido actual, en este caso una cadena, utilizando x para referirse a él.

un ámbito raíz

Todos los aplicaciones tienen $rootScope，que está en el contenedor ng-app El ámbito creado en el elemento HTML de la instrucción.

El rootScope está disponible en todo el aplicación.

Si una variable tiene el mismo nombre en el ámbito actual y en el rootScope (rootScope), la aplicación usará la variable del ámbito actual.

Ejemplo

El ámbito del controlador y el rootScope contienen una variable llamada "color":

<body ng-app="myApp">
<p>El color favorito de rootScope:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>El alcance del color favorito del controlador:</p>
  <h1>{{color}}</h1>
</div>
<p>El color favorito del rootScope sigue siendo:</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>

Prueba personalmente