郁闷!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小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
微信小程序实现日历小功能
Nov 18 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
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
php表单处理操作
2017/11/16 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
详解Vue方法与事件
2017/03/09 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
javascript实现画板功能
2020/04/12 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
写景作文评语集锦
2014/12/25 职场文书
业余无线电通联Q语
2022/02/18 无线电
win7配置本地ftp服务器的图文教程
2022/08/05 Servers