Depressed! How to solve the problem of getting the value bound to ng-model in ionic as undefined? ionicng-model

Depressed! How to solve the problem of getting the value bound to ng-model in ionic as undefined? ionicng-model

When ng-model is used in ionic today, the value is undefined in the corresponding controller. I used to get it when I used angularjs's ng-model binding. This is embarrassing and I decided to check it out. Let's take a look at the following demo.

When learning the two-way Data Binding of ng-model in angularjs, we can 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 get the console value entered on the page correctly. log (allPrpos ($ scope) ;};/* Get the attributes 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 attribute name, obj [p] is the value of the corresponding property props + = p + "=" + obj [p] + ";" ;}// finally display all the properties of the console. log (props) ;}}); </script>

By printing the $ scope object, we can see that its property does contain a name key-value pair. However, in the ionic project, we also use the following method:

Demo2

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

ChatsCtrl corresponding to controller. js corresponding to ionic:

Angular. module ('Starter. controllers ', []). controller ('chatsctrl', function ($ scope) {$ scope. show = function () {console. log ($ scope. name); // print the undefined console on the console. log (allPrpos ($ scope ));};});

No name is found in the printed $ scope attribute. The console prints undefined, but {name} on the page can be output normally. Why? It is estimated that many ionic beginners have encountered this problem in their projects. Is it because angularjs's two-way Data Binding fails in ionic? Assume that I write:

Demo3

<Ion-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 the button console. log ($ scope. name); // The console can print the value in each input box. log (allPrpos ($ scope ));};});

In this way, we should see some clues. In fact, the root cause of all problems is scope. When using directive commands such as ng-model and ng-repeat, a scope is created. In fact, this involves the problem of the controller creation time of ionic. The scope of the controller created in the ionic view routing is larger than the scope of MyChatCtrl scope in demo2; the original two scopes are different, which explains why demo2 obtained the undefind value. If the problem is found, what if the problem is solved?

Scope can be inherited, and the attributes of js objects can also be inherited. Therefore, we can change demo2 slightly. In the ChatsCtrl just now, we first define a default value:

Var $ scope. name = {text :""};

On the page, input ng-model:

<Ion-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 value of $ scope. name can be printed normally. If you do not want to use the attributes of an object, you can bind the object to the scope of its parent scope when binding. The ctrl of demo2 remains unchanged, and the Code on the page is changed to the following:

<Ion-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>

In this way, the value of $ scope. name can be obtained, and the problem is solved now. If this problem occurs, such as ng-repeat, it can also be handled. If you have other solutions, please leave a message.

References

The ng-model of ionic cannot obtain the value.
In-depth understanding of angularjs scope

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.