Cuando se usa el modelo NG en IONIC hoy, el valor obtenido en el controlador correspondiente no está definido. Solía obtenerlo al usar la unión del modelo NG de AngularJS, lo cual es vergonzoso y decidí averiguarlo. Echemos un vistazo a una demostración a continuación.
Al aprender la unión bidireccional de datos de AngularJS Ng-Model, obtenemos el valor del modelo NG correspondiente a través del siguiente código:
demo1
<div ng-app = "myApp" ng-confontroller = "myctrl"> name: <input ng-model = "name"> {{name}} <Button ng-click = "show ()"> shoname </boton> </div>JS correspondiente
<script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.show = function () {console.log ($ scope.name); // puede obtener correctamente el valor ingresado en la página console.log (allprPos ($ scope));} allprpos (obj) {// utilizado para guardar todos los nombres de atributos y valores var props = ""; obj [p] + ";";Al imprimir el objeto $ alcance, puede ver que sus propiedades contienen un par de nombre de valor clave. Pero cuando estábamos en el proyecto iónico, también lo conseguimos así:
demo2
<ion-view view-title = "chats"> <ion-content> <div> nombre: <input ng-model = "name"> {{name}} <Botton ng-click = "show ()"> shoname </boton> </div> </ion-content> </ion-view>>El chatsctrl correspondiente en el controlador correspondiente.js de iónico:
Angular.module ('Starter.Controllers', []). Controller ('chatsctrl', function ($ scope) {$ scope.show = function () {console.log ($ scope.name); // consola imprime console.log (allPpos ($ scope));});No se encontró ningún nombre en la propiedad impresa $ SCOPE. La consola impresa indefinida, pero el {{nombre}} en la página se puede emitir normalmente. ¿Por qué es esto? Se estima que muchos principiantes iónicos han encontrado esta situación en sus proyectos. ¿Los datos de AngularJS son inválidos en dos vías en Ionic? Si escribo de esta manera:
demo3
<ion-view view-title = "chats"> <ion-content ng-controller = "mychatctrl"> <div> name: <input ng-model = "name"> {{name}} <button ng-click = "show ()"> shoname </boton> </div> </ ion-content> </ ion-view> view>Redefine un mychatctrl en controlador.js:
Angular.module ('Starter.Controllers', []). Controller ('mychatctrl', function ($ scope) {$ scope.show = function () {// button de botón consolador.log ($ scope.name); // El console puede imprimir el valor en el cuadro de entrada de entrada normalmente cada vez que console console.log (allPos ($ scope);};};};};De esta manera, todos deberían haber visto algunas pistas. De hecho, la raíz de todos los problemas es el alcance. Al usar comandos de directiva como Ng-Model, Ng-Rpeat, etc., creará un alcance en sí. De hecho, esto implica el momento de la creación del controlador iónico. El alcance del alcance del control creado en la ruta de la vista iónica es más grande que el alcance del alcance mychatctrl en el Demo2 a continuación; Resulta que estos dos ámbitos son diferentes, lo que explica por qué el valor obtenido por Demo2 anterior está indefinido. Encontré un problema, ¿qué pasa si resuelvo este problema?
El alcance del alcance se puede heredar, y las propiedades del objeto JS también se heredan, por lo que podemos cambiar ligeramente Demo2 y definir un valor predeterminado en ChatSCTRL en este momento:
var $ scope.name = {text: ""};
Entrada de modelo NG en la página:
<ion-view view-title = "chats"> <ion-content ng-concontroller = "mychatctrl"> <div> name: <input ng-model = "name.text"> {{name}} <botón ng-Click = "show ()"> shoname </boton> </div> </ ion-content> </ion-view>Después de hacer esto, haga clic en el botón y encuentre que el valor de $ scope.name se puede imprimir normalmente. Si no desea utilizar las propiedades del objeto para hacer esto, puede unirlo al alcance de su alcance principal cuando está vinculante, y el CTRL de DemO2 permanece sin cambios, y el código en la página se cambia a lo siguiente:
<ion-view view-title = "chats"> <ion-content ng-Controller = "mychatctrl"> <div> nombre: <input ng-model = "$ parent.name"> {{name}} <botón ng-click = "show ()"> shoname </boton> </div> </ ion-content> </ion-view-viewEsto también obtendrá el valor de $ scope.name, y el problema se resolverá. Si este problema ocurre, se puede hacer lo mismo. Si tiene otras soluciones, deje un mensaje.
Artículo de referencia
El modelo NG de Ionic no puede obtener un problema de valor
Comprender el alcance de Angularjs
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.