郁闷!ionic中获取ng-model绑定的值为undefined如何解决

今天在ionic中使用ng-model时候，在对应的controller里面获得值为undefined。以前在使用angularjs的ng-model绑定时候就可以拿到的啊，这就尴尬了，决定一探究竟。大家先看下面的一个demo。 

在学习angularjs的ng-model的数据双向绑定时候，我们通过以下的代码拿到对应的ng-model的值：　　 

demo1

?

1 2 3 4 5

< div ng-app = "myApp" ng-controller = "myCtrl" >   名字: < input ng-model = "name" >   {{name}}   < button ng-click = "show()" >shoName</ button > </ div >

 对应的js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<script> var app = angular.module( 'myApp' , []); app.controller( 'myCtrl' , function ($scope) {   $scope.show= function (){    console.log($scope.name); //可以正确的拿到页面上输入的值    console.log(allPrpos($scope));   };   /*获取某个对象的属性*/   function allPrpos(obj) {    // 用来保存所有的属性名称和值    var props = "" ;    // 开始遍历    for ( var p in obj){     if ( typeof (obj[p])== "function" ){ // 方法     //console.log(obj[p]);     } else {     // p 为属性名称，obj[p]为对应属性的值     props += p + "=" + obj[p] + "; " ;     }    }    // 最后显示所有的属性    console.log(props);   } }); </script>

通过打印$scope对象，看到其属性的确包含一个name的键值对。但是在在ionic项目的时候，我们同样是这样拿的： 

demo2

?

1 2 3 4 5 6 7 8 9

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

在ionic对应的controller.js的对应的ChatsCtrl:

?

1 2 3 4 5 6 7

angular.module( 'starter.controllers' , []) .controller( 'ChatsCtrl' , function ($scope) {   $scope.show= function (){    console.log($scope.name); //控制台打印undefined    console.log(allPrpos($scope));   }; });

在打印的$scope属性里面并未发现name，控制台打印undefined，页面上{{name}}却可以正常输出来，这是为何呢？估计很多ionic初学者在做项目中都遇到过这个情况，是不是angularjs的数据双向绑定在ionic中失效了？假如我这样写：　　 

demo3

?

1 2 3 4 5 6 7 8 9

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

在controller.js里面重新定义一个MyChatCtrl：

?

1 2 3 4 5 6 7

angular.module( 'starter.controllers' , []) .controller( 'MyChatCtrl' , function ($scope) {   $scope.show= function (){ //点击button    console.log($scope.name); //控制台可以正常打印每次input输入框里面的值    console.log(allPrpos($scope));   }; });

这样大家应该就看出一些端倪了吧，其实一切问题的根源就是scope。当使用ng-model、ng-repeat等directive命令的时候，其本身会创建一个scope。其实，这涉及到ionic的controller创建时机问题，ionic视图路由里面创建的controller的scope的作用域要比下面的demo2中MyChatCtrl的scope的作用域要大；原来这两个scope是不同的，这也就解释了上面demo2为何拿到的值为undefind。发现问题了，如果解决这个问题呢？ 

scope作用域是可以继承的，js对象的属性也是继承的，所以我们可以稍微改下demo2，在刚才的ChatsCtrl先定义一个默认值:　　

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

在页面上input的ng-model：

?

1 2 3 4 5 6 7 8 9

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

经过做如此处理后，再点击button发现可以正常打印$scope.name的值。如果你不想用对象的属性这样来做，你有可以把绑定的时候绑定到其父作用域的scope里面，demo2的ctrl不变，页面上的代码改为如下:

?

1 2 3 4 5 6 7 8 9

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

这样同样可以拿到$scope.name的值，至此问题解决。ng-repeat等如果出现此问题，同样可以如此处理。大家如果有其他的解决方案，欢迎留言提出。 　 

参考文章

ionic的ng-model无法获取值问题 
深入理解angularjs的scope

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

原文链接：http://blog.csdn.net/lishihong108/article/details/52225933