La creación del controlador
El controlador AngularJS se usa en todas partes, y la demostración del código es relativamente simple de crear.
<! Doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "examineppp"> <head> <meta http " src = "angular.js"> </script> <link href = "bootstrap-theme.css" rel = "stylesheet" /> <link href = "bootstrap.css" rel = "stylesheet" /><script>angular.module("exaPlEppp ", []). {$ $ scope.setInput = function = function (value) {conso console.log ("print:" + value);}}); </script> </head> <body ng-controller = "defaultctrl"> <div> <h> cuenta </h> <Div> <iving requerido ng-model = "valor"/> <botón ng-click = "setInput (valor)"> haga clic en </botón> </div> </body> </html>El control es muy simple. Primero, agregué el atributo NG-APP a HTML para indicar el alcance del módulo.
Se agregó Ng-Controller al cuerpo para representar el alcance del controlador predeterminado.
El comando NG-Model en la nota de entrada es datos de enlace, enlace de datos de dos vías (MVVM).
$ El alcance es el alcance incorporado de Angularjs.
Este ejemplo es solo para imprimir el valor de entrada en la consola, como se muestra en la figura:
Eso es todo, es simple.
Problemas de alcance de controlador múltiple
Ahora modificemos el programa.
<body> <div ng-concontroller = "defaultctrl"> <h> count </h> <div> <input requerido ng-model = "valor"/> <botón ng-click = "setinput (valor)"> haga clic en </botón> </div> </div> <iv ng-controller = "defaultctrl"> <h> count </h> <divs> <ivin requerir el botón requerido ng-button ng-click = "setinput (valor)"> haga clic en </botón> </div> </body>
El resto del código permanece sin cambios, acabo de poner la propiedad Ng-Controller colocada en el cuerpo en los dos divs. Reutilicé el controlador predeterminado. Supongo que si ingreso contenido en la primera etiqueta de entrada y hago clic en el botón del segundo controlador, ¿aparecerá el resultado que espera?
¿Es el resultado el mismo que lo piensas de ti? Puede ver que el resultado no está definido. En una buena explicación, debería ser que su alcance es diferente. Aunque reutilizó el controlador unificado, el alcance es realmente diferente al crearlo.
La función de fábrica llamada devolverá diferentes ámbitos.
Entonces, ¿cómo acceder entre diferentes ámbitos? En AngularJS, hay un $ Rootscope para el acceso al alcance.
Aquí hay tres funciones para introducir.
$ on (nombre, controlador) Registre una función de controlador de eventos que se llamará cuando el alcance actual reciba un evento específico.
$ emit (nombre, args) envía un evento al alcance actual de los padres hasta el alcance de la raíz.
$ Broadcast (Nombre, Args) envía un evento al subescopio bajo el alcance actual, el parámetro es el nombre del evento y un objeto utilizado para proporcionar datos adicionales al evento.
Ahora cambie el siguiente código:
<Script> Angular.module ("ESPEPPLEAPP", []). Controller ("DefaultCtrl", function ($ scope, $ rootsCope) {$ scope. $ on ("updateValue", function (event, ever, {$ scope.input = args.zip;}); $ scope.setinput = function) {$ rootscope. zip: value}); console.log ("print:" + $ scope.input);} $ scope.copy = function () {console.log ("copy:" + $ scope.input);};}); </script> <ng-controller = "defaultctrl"> <h> contando </h> <div> <ivin requerido ng-model "/" valor "/" ng-click = "copy ()"> Copy </boton> </div> </div>En el código de segmento agregué varias funciones y cambié las funciones del segundo controlador al mismo tiempo.
resultado:
Sucedió.
Herencia del controlador
<Script> Angular.module ("ESPPLEPEPP", []). Controller ("DefaultCtrl", function ($ scope, $ rootscope) {//$cope.$one("UPDateValue ", function (event, args) {// $ scope.input = args.zip; //}); $ scope.setinput (valor (valor) {//$rootscope.$broadcast("UPDateValue ", {zip: valor}); $ scope.input = value; console.log (" print: " + $ scope.input);} $ scope.copy = function () {console.log (" copy: " + $ scope.input);};}). controlador (controlador (" "" Simple ($ simple ($ simple (simple), simple) {$ $ scope.copy = function () {consolte.log ("Copy:" + $ scope.input);};}); </script> <cuerpo ng-concontroller = "defaultctrl"> <div> <h> cuenta </h> <div> <input requerido ng-model = "valor"/> <botón ng-Click = "setinput (valor)"> haga clic en </botón> </div> <div> <div ng-controller = "simpleectrl"> <h> cuenta </h> <div> <input requerido ng-model = "value"/> <botón ng-Click = "copy ()"> copy </boton> </div> </div> </body>Agregué un controlador, y después de una cuidadosa observación de SimpleCectl, descubrí que defaultCTRL contiene SimpleCectl, por lo que la función simple hereda.
Resultados: Cuando publiqué la entrada en la primera ventana, la segunda también cambió, y debería ser el mismo valor.
Problema de alcance de $ alcance, debe comprender su alcance al usar el controlador.