Lors de l'utilisation du modèle NG dans ionique aujourd'hui, la valeur obtenue dans le contrôleur correspondant n'est pas définie. J'avais l'habitude de l'obtenir lors de l'utilisation de la liaison du modèle NG d'AngularJS, ce qui est embarrassant et a décidé de le découvrir. Jetons un coup d'œil à une démo ci-dessous.
Lors de l'apprentissage de la liaison bidirectionnelle des données du modèle AngularJS NG, nous obtenons la valeur NG du modèle NG correspondant via le code suivant:
démo1
<div ng-app = "myApp" ng-Controller = "myctrl"> name: <input ng-model = "name"> {{name}} <bouton ng-click = "show ()"> shoname </utton> </div>JS correspondant
<cript> var app = angular.module ('myApp', []); app.Controller ('myctrl', function ($ scope) {$ scope.show = function () {console.log ($ scope.name); // vous pouvez obtenir correctement la valeur entrée sur la page console.log (allppos ($ scope));}; AllPrPos (obj) {// Utilisé pour enregistrer tous les noms d'attributs et valeurs var props = ""; obj [p] + ";";}} // Enfin, toutes les propriétés sont affichées console.log (accessoires);En imprimant l'objet Scope $, vous pouvez voir que ses propriétés contiennent une paire de noms de valeur clé. Mais quand nous étions dans le projet ionique, nous l'avons également compris comme ceci:
démo2
<ion-View View-Title = "Chats"> <ion-content> <div> name: <entrée ng-model = "name"> {{name}} <Button ng-Click = "show ()"> shoname </utton> </div> </dion-content> </on-view>Le chatsctrl correspondant dans le contrôleur correspondant.js d'Ionic:
angular.module ('starter.controllers', []). Controller ('ChatSctrl', function ($ scope) {$ scope.show = function () {console.log ($ scope.name); // console imprime une console non définie.log (allpPos ($ scope));}});Aucun nom n'a été trouvé dans la propriété de Scope $ imprimée. La console imprimée non définie, mais le {{nom}} sur la page peut être sorti normalement. Pourquoi est-ce? On estime que de nombreux débutants ioniques ont rencontré cette situation dans leurs projets. Les données d'AngularJS sont-elles invalides de liaison bidirectionnelle en ionique? Si j'écris de cette façon:
démo3
<ion-visuel View-Title = "Chats"> <ion-CONTENT NG-Controller = "MyChatCtrl"> <div> Name: <Input ng-model = "name"> {{name}} <bouton ng-Click = "show ()"> shoname </utton> </v> </ion-Content> </ion-view>Redéfinir un mychatctrl dans Controller.js:
angular.module ('starter.controllers', []). Controller ('mychatctrl', function ($ scope) {$ scope.Show = function () {// cliquez sur le bouton Console.log ($ scope.name); // la console peut imprimer la valeur dans la boîte d'entrée de l'entrée normalement;De cette façon, tout le monde aurait dû voir des indices. En fait, la racine de tous les problèmes est la portée. Lorsque vous utilisez des commandes directives telles que Ng-Model, Ng-Repeat, etc., il créera une portée elle-même. En fait, cela implique le moment de la création de contrôleur ionique. La portée de la portée du contrôle créée dans la route de vue ionique est plus grande que la portée de la portée MyChatctrl dans la démo2 ci-dessous; Il s'avère que ces deux portées sont différentes, ce qui explique pourquoi la valeur obtenue par Demo2 ci-dessus n'est pas définie. J'ai trouvé un problème, et si je résolve ce problème?
La portée de la portée peut être héritée et les propriétés de l'objet JS sont également héritées, nous pouvons donc modifier légèrement Demo2 et définir une valeur par défaut dans Chatsctrl tout à l'heure:
var $ scope.name = {text: ""};
Entrée du modèle NG sur la page:
<ion-visuel View-Title = "Chats"> <ion-content ng-controller = "mychatctrl"> <div> name: <entrée ng-model = "name.text"> {{name}} <button ng-click = "show ()"> shoname </sbut> </v> </dion-content>Après cela, cliquez sur le bouton et constatez que la valeur de $ scope.name peut être imprimée normalement. Si vous ne souhaitez pas utiliser les propriétés de l'objet pour ce faire, vous pouvez le lier à la portée de sa portée parent lors de la liaison, et le CTRL de Demo2 reste inchangé et le code sur la page est modifié par ce qui suit:
<ion-View View-Title = "Chats"> <ion-CONTENT NG-Controller = "MyChatCtrl"> <div> Name: <Input Ng-Model = "$ Parent.Name"> {{Name}} <Button Ng-Click = "Show ()"> Shoname </button> </v> </on-content>Cela obtiendra également la valeur de $ scope.nom, et le problème sera résolu. Si ce problème se produit, il en va de même. Si vous avez d'autres solutions, veuillez laisser un message.
Article de référence
Le modèle Ng d'Ionic ne peut pas obtenir de problème de valeur
Comprendre la portée des angularjs
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.