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


Posted in Javascript onAugust 27, 2016

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

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


demo1

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

 对应的js

<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

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

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

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

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:

<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不变,页面上的代码改为如下:

<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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
ionic实现带字的toggle滑动组件
Aug 27 #Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 #Javascript
ionic实现滑动的三种方式
Aug 27 #Javascript
js select实现省市区联动选择
Apr 17 #Javascript
轻松掌握JavaScript装饰者模式
Aug 27 #Javascript
node.js实现快速截图
Aug 27 #Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 #Javascript
You might like
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php $_SERVER当前完整url的写法
2009/11/12 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
PDO::quote讲解
2019/01/29 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python使用gRPC传输协议教程
2018/10/16 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
大学社团活动策划书
2014/01/26 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
战略合作协议书范本
2014/04/18 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
python munch库的使用解析
2021/05/25 Python
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js