When using ng-model in ionic today, the value obtained in the corresponding controller is undefined. I used to get it when using angularjs' ng-model binding, which is embarrassing and decided to find out. Let’s take a look at a demo below.
When learning the data bidirectional binding of angularjs ng-model, we get the corresponding ng-model value through the following code:
demo1
<div ng-app="myApp" ng-controller="myCtrl"> Name: <input ng-model="name"> {{name}} <button ng-click="show()">shoName</button></div>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 the attribute of an object*/ function allPrpos(obj) { // Used to save all attribute 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 properties are displayed console.log(props); }});</script>By printing the $scope object, you can see that its properties do contain a key-value pair of name. But when we were in the ionic project, we also got it like this:
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>The corresponding ChatsCtrl in the corresponding controller.js of ionic:
angular.module('starter.controllers', []).controller('ChatsCtrl', function($scope) { $scope.show=function(){ console.log($scope.name);//Console prints undefined console.log(allPrpos($scope)); };});No name was found in the printed $scope property. The console printed undefined, but the {{name}} on the page can be output normally. Why is this? It is estimated that many ionic beginners have encountered this situation in their projects. Is angularjs' data two-way binding invalid in ionic? If I write this way:
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 in controller.js:
angular.module('starter.controllers', []).controller('MyChatCtrl', function($scope) { $scope.show=function(){//Click button console.log($scope.name);//The console can print the value in the input input box normally every time console.log(allPrpos($scope)); };});In this way, everyone should have seen some clues. In fact, the root of all problems is scope. When using directive commands such as ng-model, ng-repeat, etc., it will create a scope itself. In fact, this involves the timing of ionic controller creation. The scope of the control's scope created in the ionic view route is larger than the scope of the MyChatCtrl scope in the demo2 below; it turns out that these two scopes are different, which explains why the value obtained by demo2 above is undefined. I found a problem, what if I solve this problem?
The scope scope can be inherited, and the properties of the js object are also inherited, so we can change demo2 slightly and define a default value in ChatsCtrl just now:
var $scope.name={text:""};
ng-model 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 this, click on button and find that the value of $scope.name can be printed normally. If you don't want to use the object's properties to do this, you can bind it to the scope of its parent scope when binding, and the ctrl of demo2 remains unchanged, and the code on the page is changed 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 will also get the value of $scope.name, and the problem will be solved. If this problem occurs, the same can be done. If you have any other solutions, please leave a message.
Reference article
Ionic's ng-model cannot get value problem
Understand the scope of angularjs
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.