郁闷!ionic中获取ng-model绑定的值为undefined如何解决
来源:互联网 发布:设计软件图标 编辑:程序博客网 时间:2024/06/06 21:18
转载请注明出处:
http://blog.csdn.net/lishihong108/article/details/52225933
lishihong的博客
今天在ionic中使用ng-model时候,在对应的controller里面获得值为undefined。以前在使用AngularJS的ng-model绑定时候就可以拿到的啊,这就尴尬了,决定一探究竟。大家先看下面的一个demo。
在学习angularjs的ng-model的数据双向绑定时候,我们通过以下的代码拿到对应的ng-model的值:
demo1
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
对应的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
- 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
通过打印$scope对象,看到其属性的确包含一个name的键值对。但是在在ionic项目的时候,我们同样是这样拿的:
demo2
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
在ionic对应的controller.js的对应的ChatsCtrl:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
在打印的$scope属性里面并未发现name,控制台打印undefined,页面上{{name}}却可以正常输出来,这是为何呢?估计很多ionic初学者在做项目中都遇到过这个情况,是不是angularjs的数据双向绑定在ionic中失效了?假如我这样写:
demo3
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
在controller.js里面重新定义一个MyChatCtrl:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
这样大家应该就看出一些端倪了吧,其实一切问题的根源就是scope。当使用ng-model、ng-repeat等directive命令的时候,其本身会创建一个scope。其实,这涉及到ionic的controller创建时机问题,ionic视图路由里面创建的controller的scope的作用域要比下面的demo2中MyChatCtrl的scope的作用域要大;原来这两个scope是不同的,这也就解释了上面demo2为何拿到的值为undefind。发现问题了,如果解决这个问题呢?
scope作用域是可以继承的,js对象的属性也是继承的,所以我们可以稍微改下demo2,在刚才的ChatsCtrl先定义一个默认值:
- 1
- 1
在页面上input的ng-model:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
经过做如此处理后,再点击button发现可以正常打印$scope.name的值。如果你不想用对象的属性这样来做,你有可以把绑定的时候绑定到其父作用域的scope里面,demo2的ctrl不变,页面上的代码改为如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
这样同样可以拿到$scope.name的值,至此问题解决。ng-repeat等如果出现此问题,同样可以如此处理。大家如果有其他的解决方案,欢迎留言提出。
参考文章
ionic的ng-model无法获取值问题
深入理解angularjs的scope
- 郁闷!ionic中获取ng-model绑定的值为undefined如何解决
- 郁闷!ionic中获取ng-model绑定的值为undefined如何解决
- ionic中获取ng-model绑定的值undefined?
- 如何在ng-if中取得ng-model的值
- ng-model 绑定checkbox的值
- ionic ng-model controller中取不到值(input)
- ionic ng-model controller中取不到值(input)
- AngularJS中获取ng-repeat动态生成的ng-model值
- AngularJS中获取ng-repeat动态生成的ng-model值
- AngularJS中获取ng-repeat动态生成的ng-model值
- angular 控制器controller里获取不到ng-model的值,获取为undefine
- angularJs中ng-repeat遍历动态生成的表单元素绑定ng-model无效的问题
- 利用ng-model把前端获取的值和后台传过来的值进行双向绑定
- 动态绑定ng-model
- AngularJS动态绑定ng-options的ng-model
- AngularJS ng-model获取不到WdatePicker值的解决方案
- ng-model获取不了type=file值的解决办法
- AngularJS中对于ng-model绑定的bootstrap的label标签不刷新问题
- 【Linux】 文件管理操作命令
- mysql计划任务
- Android百度地图之周边雷达
- linux内核的编译与安装
- 让你快速上手Runtime
- 郁闷!ionic中获取ng-model绑定的值为undefined如何解决
- [SSOI3051] 礼物(present)
- 博客开通啦
- FFmpeg 基本用法--此文转载,作为笔记
- Swift3.1(2)Basic Opetators
- BZOJ2179——FFT快速傅立叶
- Linux硬盘相关检测
- Email 的两种方法
- HDU5521Meeting 【Dijkstra】