Depressed!ionic get Ng-model binding value for undefined how to solve _javascript skills

Today in ionic use Ng-model, in the corresponding controller to obtain a value of undefined. Previously in the use of ANGULARJS Ng-model binding time can be obtained Ah, this is embarrassing, decided to find out. Let's look at a demo below.

In learning Angularjs Ng-model data two-way binding, we get the corresponding Ng-model value by following code:

Demo1

<div ng-app= "myApp" ng-controller= "Myctrl" >
 name: <input ng-model= "Name" >
 {{name}}
 < Button ng-click= "show ()" >shoName</button>
</div> 

The corresponding JS

<script>
var app = Angular.module (' myApp ', []);
App.controller (' Myctrl ', function ($scope) {
 $scope. Show=function () {
  console.log ($scope. name);/ You can correctly get the value entered on the page
  Console.log (Allprpos ($scope));
 /* Get Properties of an object/
 function Allprpos (obj) { 
  //To hold all property names and values
  var props = "";
  Start traversing
  for (var p in obj) { 
   if (typeof (Obj[p]) = = "function") {//Method
   //console.log (Obj[p]);
   } else{ 
   //P is the property name, Obj[p] is the value of the corresponding property props + =
   p + "=" + obj[p] + ";";
   } 
  } 
  Finally, all attributes
  console.log (props);}) are displayed
;
</script>

By printing the $scope object, you see that its properties do indeed contain a key value pair of name. But when it comes to the Ionic project, we get the same thing:

Demo2

<ion-view view-title= "Chats" >
 <ion-content>
  <div>
   name: <input ng-model= "Name" >
   {{name}}
   <button ng-click= "show ()" >shoName</button>
  </div> 
 </ion-content >
</ion-view>

Corresponding Chatsctrl of the corresponding controller.js in the ionic:

Angular.module (' starter.controllers ', [])
. Controller (' Chatsctrl ', function ($scope) {
 $scope. show= function () {
  console.log ($scope. Name);//console print undefined
  console.log (Allprpos ($scope);
 };}
);

In the printed $scope property did not find the name, the console printing undefined, the page {{name}} can be normal output, this is why? It is estimated that many ionic beginners in the project have encountered this situation, is not angularjs data two-way binding in the Ionic failure? If I write this:

Demo3

<ion-view view-title= "Chats" >
 <ion-content ng-controller= "Mychatctrl" >
  <div>
   Name: <input ng-model= "Name" >
   {{name}}
   <button ng-click= "show ()" >shoName</button>
  </ div> 
 </ion-content>
</ion-view>

Redefine a Mychatctrl inside the controller.js:

Angular.module (' starter.controllers ', [])
. Controller (' Mychatctrl ', function ($scope) {
 $scope. show= function () {//click button
  console.log ($scope. Name);//The console can normally print the value Console.log (allprpos in each input box) (
  $scope ));
 };
});

So we should see some clues, in fact, the root of all problems is scope. When using the directive command, such as Ng-model, Ng-repeat, it creates a scope itself. In fact, this involves Ionic's controller creation timing problem, where the scope of the controller created in Ionic view routing is larger than the scope of Demo2 in the following Mychatctrl The original two scopes are different, which explains why the above Demo2 value is undefind. Find the problem, if solve this problem?

Scope scope is inheritable, JS object properties are also inherited, so we can slightly change the Demo2, in just Chatsctrl first define a default value:

var $scope. Name={text: ""};

Ng-model for input on the page:

<ion-view view-title= "Chats" >
 <ion-content ng-controller= "Mychatctrl" >
  <div>
   Name: <input ng-model= "Name.text" >
   {{name}}
   <button ng-click= "show ()" >shoName</button>
  </div> 
 </ion-content>
</ion-view>

After doing so, click the button to find that the $scope.name value can be printed correctly. If you do not want to do this with the object's properties, you have the time to bind the binding to the scope of its parent scope, DEMO2 CTRL does not change, and the code on the page changes to the following:

<ion-view view-title= "Chats" >
 <ion-content ng-controller= "Mychatctrl" >
  <div>
   name : <input ng-model= "$parent. Name" >
   {{name}}
   <button ng-click= "show ()" >shoName</button>
  </div> 
 </ion-content>
</ion-view>

This also can get the value of $scope.name, the problem solved. Ng-repeat, etc. if this problem occurs, the same can be handled. If you have other solutions, please comment.

Reference articles

Ionic Ng-model cannot get a value problem
Deep understanding of the scope of ANGULARJS

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.