郁闷!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 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP的5个安全措施小结
2012/07/17 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
javascript面向对象之二 命名空间
2011/02/08 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
easyui validatebox验证
2016/04/29 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
Numpy array数据的增、删、改、查实例
2018/06/04 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
django实现后台显示媒体文件
2020/04/07 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
自我评价中英文语句
2013/11/30 职场文书
求职信范文英文版
2014/01/05 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
网络优化专员求职信
2014/05/04 职场文书
党校培训学习心得体会
2016/01/06 职场文书
创业计划书之花店
2019/09/20 职场文书
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL