郁闷!ionic中获取ng-model绑定的值为undefined如何解决
今天在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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
解决springboot使用logback日志出现LOG_PATH_IS_UNDEFINED文件夹的问题
这篇文章主要介绍了解决springboot使用logback日志出现LOG_PATH_IS_UNDEFINED文件夹的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-28- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
- 本篇文章主要介绍了AngularJS的ng-click传参的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-24
- 这篇文章主要为大家详细介绍了Ionic默认的Tabs模板使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
AngularJS使用ngOption实现下拉列表的实例代码
这篇文章主要介绍了AngularJS使用ngOption实现下拉列表的实例代码的相关资料,需要的朋友可以参考下...2016-01-25- 在日常项目开发中我们经常见到下拉刷新上拉加载的功能,接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下...2016-06-12
- Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。接下来小编给大家介绍如何安装 Ionic 在自己的电脑上搭建一个简单的小应用,感兴趣的朋友一起看看吧...2016-06-12
- 在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,基于ionic怎么实现呢?下面小编给大家分享ionic中列表项增加和删除的实现方法,一起看看吧...2017-01-26
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
这篇文章主要介绍了Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析的相关资料,需要的朋友可以参考下...2016-01-21AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
这篇文章主要介绍了AngularJS实现用户登录状态判断的方法,通过Model添加拦截过滤器,路由增加限制实现针对登陆状态的判断功能,需要的朋友可以参考下...2017-01-09- 这篇文章主要为大家详细介绍了vue v-model表单控件绑定的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
- 这篇文章主要为大家详细介绍了ionic实现可滑动的tab选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
php Fatal error: Call to undefined function imagecreatefromjpeg()
imagecreatefromjpeg函数是一个图像处理函数,但在使用中发现Fatal error: Call to undefined function imagecreatefromjpeg()错误了,下文小编整理了一些教程,大家一起来...2016-11-25php连接mysql提示Call to undefined function mysql_connect()
今天在windows中配置了php mysql环境,很高兴测试一段代码结果提示Call to undefined function mysql_connect()这证明数据库配置不成功哈。 代码如下 ...2016-11-25Call to undefined method DebugBar\\DebugBar::info()
我们看到英文Call to undefined method就知道是因为函数或方法没有定义了,这个对于插件就有可能是什么功能没有开启了,我们下面来看看Call to undefined method DebugBa...2016-11-25- 这篇文章主要介绍了Ionic2调用本地SQlite实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-27
php Call to undefined function mssql_connect()
现在想连接MSSQL2000,把MSSQL数据导入到MYSQL,发现链接不上MSSQL, 提示 Call to undefined function mssql_connect() 已做步骤: 1:php.ini extension = php_mssql.dll...2016-11-25XAMPP使用CURL提示“Call to undefined function curl_init”问题
根据本人经验如果在使用php函数或方法出现Call to undefined function curl_init”错误提醒时就是php.ini中配置文件没有配置好了,解决方法也非常的简单 XAMPP打开...2016-11-25- 在app中经常会有滚动的跑马灯效果的运用,接下来通过本文给大家介绍使用ionic在首页新闻中应用到的跑马灯效果的实现方法,需要的的朋友参考下...2017-02-19
- 这篇文章主要为大家详细介绍了ionic实现带字的toggle滑动组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01