押し下げられた！未定義のイオンでng-modelバインドの値を取得する問題を解決する方法

今日のIonicでNG-Modelを使用する場合、対応するコントローラーで得られた値は未定義です。 AngularjsのNg-Modelバインディングを使用するときにそれを取得していましたが、これは恥ずかしいことで、調べることにしました。以下のデモを見てみましょう。

AngularJS ng-Modelのデータ双方向の結合を学習すると、次のコードを使用して対応するNG-Model値を取得します。

DEMO1

 <div ng-app = "myApp" ng-controller = "myctrl"> name：<input ng-model = "name"> {{name}} <button ng-click = "show（）"> shoname </button> </div>

対応するJS

 <script> var app = angular.module（ 'myapp'、[]）; app.controller（ 'myctrl'、function（$ scope）{$ scope.show = function（）{console.log（$ scope.name）; // page console.log（$ scope）; console.log（$ scope）; AllPROS（OBJ）{//すべての属性名と値を保存するために使用されます= ""; obj [p] + ";";最後に、すべてのプロパティが表示されます

$ scopeオブジェクトを印刷することにより、そのプロパティにはキー価値の名前のペアが含まれていることがわかります。しかし、私たちがイオンプロジェクトにいたとき、私たちはまたこのようにそれを手に入れました：

Demo2

 <ion-view view-title = "chats"> <ion-content> <div> name：<入力ng-model = "name"> {{name}} <button ng-click = "show（）"> shoname> </div> </ion-content> </ion-view> </button

Ionicの対応するcontroller.jsの対応するchatsctrl：

 Angular.module（ 'starter.controllers'、[]）。コントローラー（ 'chatsctrl'、function（$ scope）{$ scope.show = function（）{console.log（$ scope.name）; // console console undefined console.log（allprpos（$ scope））;};}）;

印刷された$ scopeプロパティには名前が見つかりませんでした。コンソールは未定義で印刷されていますが、ページ上の{{name}}は正常に出力できます。なぜこれがなぜですか？多くのイオンの初心者がプロジェクトでこの状況に遭遇したと推定されています。 AngularJSのデータは、イオンで双方向結合が無効ですか？私がこのように書いた場合：

デモ3

 <ion-view view-title = "chats"> <ion-content ng-controller = "mychatctrl"> <div> name：<input ng-model = "name"> {{name}} <button ng-click = "show（）"> shoname </button> </</ion-content> </ion-vioio>

controller.jsでmychatctrlを再定義する：

 Angular.module（ 'starter.controllers'、[]）。コントローラー（ 'mychatctrl'、function（$ scope）{$ scope.show = function（）{// button console.log（$ scope.name）; // consoleは、入力入力ボックスに値を印刷できます。

このようにして、誰もがいくつかの手がかりを見るべきでした。実際、すべての問題のルートは範囲です。 NG-Model、NG-Reepeatなどのディレクティブコマンドを使用すると、スコープ自体が作成されます。実際、これにはイオンコントローラーの作成のタイミングが含まれます。イオンビュールートで作成されたコントロールの範囲の範囲は、以下のDEMO2のmyChatctrlスコープの範囲よりも大きいです。これらの2つのスコープは異なることがわかります。これは、上記のDemo2によって得られた値が未定義である理由を説明しています。問題が見つかりました。この問題を解決した場合はどうなりますか？

スコープスコープを継承することができ、JSオブジェクトのプロパティも継承されるため、DEMO2をわずかに変更して、今すぐCHATSCTRLのデフォルト値を定義できます。

var $ scope.name = {text： ""};

ページ上のng-model入力：

 <Ion-View View-Title = "Chats"> <ion-content ng-controller = "mychatctrl"> <div> name：<input ng-model = "name.text"> {{name}} <ボタンng-click = "show（）"> shoname </button>

これを行った後、ボタンをクリックすると、$ scope.nameの値が正常に印刷できることを確認します。これを行うためにオブジェクトのプロパティを使用したくない場合は、バインディング時にそれを親範囲の範囲にバインドできます。Demo2のCtrlは変更されておらず、ページ上のコードが次のように変更されます。

 <Ion-View View-Title = "Chats"> <ion-content ng-controller = "mychatctrl"> <div> name：<input ng-model = "$ parent.name"> {{name}} <ボタンng-click = "show（）"> shoname </button>

これにより、$ scope.nameの値も取得され、問題は解決されます。この問題が発生した場合、同じことを行うことができます。他にソリューションがある場合は、メッセージを残してください。

参照記事

IonicのNG-Modelは価値の問題を抱えていません

Angularjsの範囲を理解します

上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。