Alcance AngularJS (alcance)
El alcance es el enlace entre HTML (View) y JavaScript (controlador).
El alcance es un objeto con métodos y propiedades disponibles.
El alcance se puede aplicar en vistas y controladores.
Cómo usar el alcance
Cuando crea un controlador en AngularJS, puede pasar el objeto $ Alcance como parámetro:
Instancia de angularjs
Las propiedades en el controlador corresponden a las propiedades en la vista:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-concontroller = "myctrl"> {{carname}} </biv> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.carnar El nombre utilizado en la vista en {{}}. </p> </body> </htmlResultados de ejecución:
Volvo
Cree un nombre de atributo "Carname" en el controlador, que corresponde al nombre utilizado en la vista en {{}}.
Al agregar un objeto $ Alcance al controlador, la vista (HTML) puede obtener estas propiedades.
En la vista, no necesita agregar el prefijo $ Scope, solo necesita agregar el nombre del atributo, como: {{carname}}.
Descripción general del alcance
La composición de la aplicación AngularJS es la siguiente:
Ver (ver), es decir, html.
Modelo, datos disponibles en la vista actual.
El controlador, es decir, la función JavaScript, puede agregar o modificar propiedades.
El alcance es el modelo.
El alcance es un objeto JavaScript con propiedades y métodos que pueden usarse en vistas y controladores.
Instancia de angularjs
Si modifica la vista, el modelo y el controlador también se actualizarán en consecuencia:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "myctrl"> <input ng-model = "name"> mi nombre es {{name}} </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.name = "John doe";}); <script <p> script <p> script <p> script the ovalift the ovalift the overa> the Gaule the Gaule <P> El cuadro de entrada, afectará el modelo y, por supuesto, también afectará el valor de atributo correspondiente del controlador. </p> </body> </html>Resultados de ejecución:
Mi nombre es John Doe
Cuando modifique el valor en el cuadro de entrada, afectará el modelo y, por supuesto, también afectará el valor de atributo correspondiente del controlador.
Alcance
Es muy importante conocer el alcance que está utilizando actualmente.
En las dos instancias anteriores, solo hay un alcance del alcance, por lo que es relativamente simple de procesar. Sin embargo, en proyectos grandes, hay múltiples ámbitos en HTML DOM. En este momento, debe saber qué alcance correspondiente al alcance que está utilizando.
Instancia de angularjs
Cuando usamos la Directiva NG-Repeat, cada duplicado accede al objeto duplicado actual:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> 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> </body> </html>Resultados de ejecución:
Cada elemento <li> puede acceder al objeto duplicado actual, que corresponde a una cadena, y está representado por la variable x.
Alcance de la raíz
Todas las aplicaciones tienen un $ Rootscope que se puede usar en todos los elementos HTML contenidos en la Directiva NG-APP.
$ ROOTSCOPE se puede usar durante toda la aplicación. Es el puente de alcance en cada controlador. Los valores definidos con Rootscope se pueden usar en cada controlador.
Instancia de angularjs
Al crear un controlador, pase $ Rootscope como parámetro y se puede usar en la aplicación:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div-dapp-app-app = "myapp" ng "ng" ng "ng" ngcontrer "myCtrler" El nombre de apellido es {{LastName}} Miembros de la familia: <ul> <li ng-repeat = "x in nombres"> {{x}} {{lastname}} </li> </ul> </div> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope, $ cope, $ cope) $ Scope.names = ["Emil", "Tobias", "Linus"]; </p> </body> </html>Resultados de ejecución:
El apellido es miembro de la familia Refsnes:
Tenga en cuenta que $ ROOTSCOPE es accesible tanto dentro como fuera del objeto de bucle.