English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
El ámbito es un objeto JavaScript especial utilizado para conectar el controlador con la vista. El ámbito contiene datos de modelo. En el controlador, se accede a los datos de modelo a través del objeto $scope.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "En controlador de forma";
$scope.type = "Shape";
});
</script>En el ejemplo anterior, se consideraron los siguientes puntos-
$scope se pasa como primer parámetro al constructor del controlador.
$scope.message y $scope.type son modelos utilizados en la página HTML.
Asignamos valores al modelo reflejado en el módulo de aplicación, el controlador del cual es shapeController.
Podemos definir funciones en $scope.
el ámbito (ámbito) es específico del controlador. Si definimos controladores anidados, los controladores secundarios heredarán el ámbito de sus controladores superiores.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "En controlador de forma";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "En controlador de círculo";
});
</script>En el ejemplo anterior, se consideraron los siguientes puntos-
estamos asignando valores al modelo en
estamos encircleControllercontrolador secundario se sobrescribe el mensaje. Cuando se llama acircleControlleren el módulo controladorcuando el mensaje, se utilizará el mensaje cubierto.
A continuación, se muestra un ejemplo de uso de todas las instrucciones anteriores.
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2> AngularJS Scope (Ámbito) </h2>
<div ng-app = "mainApp" ng-controller = "shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller = "circleController">
<p>{{message}} <br/> {{type}} </p>
</div>
<div ng-controller = "squareController">
<p>{{message}} <br/> {{type}} </p>
</div>
</div>
<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "Controlador de forma";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "Controlador de círculo";
});
mainApp.controller("squareController", function($scope) {
$scope.message = "Controlador de cuadrado";
$scope.type = "Square";
});
</script>
</body>
</html>Prueba y mira‹/›Resultados de salida
Abrir el archivo en el navegador webtestAngularJS.htmy ver los resultados.