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

 更新时间:2016年08月27日 16:53:31   作者:lishihong108  
很是郁闷!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

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

相关文章

  • JavaScript几种弹窗事件的使用

    JavaScript几种弹窗事件的使用

    这篇文章主要介绍了JavaScript几种弹窗事件的使用,弹窗事件就是在我们执行某操作的时候,弹出信息框给出提示。或收集数据的时候,弹出窗口收集信息,不想收集可以取消隐藏,下文介绍需要的朋友可以参考一下
    2022-02-02
  • 移动端点击态处理的三种实现方式

    移动端点击态处理的三种实现方式

    在移动端开发的时候,常常需要加点击态,就是当用户点击某个URL时,给相应的标签添加按下效果样式。这篇文章给大家分享了三种实现方法,包括伪类:active、webkit-tap-highlight-color和touch事件,下面来一起看看详细的介绍吧。
    2017-01-01
  • javascript的动态加载、缓存、更新以及复用(一)

    javascript的动态加载、缓存、更新以及复用(一)

    在做OA、MIS、ERP等信息管理类的项目,经常会遇到引用很多js文件,这就需要用到动态加载、缓存、更新以及复用等技术,下面我们来讨论下
    2014-06-06
  • js取滚动条的尺寸的函数代码

    js取滚动条的尺寸的函数代码

    js取滚动条的尺寸的函数代码,需要的朋友可以参考下。
    2011-11-11
  • 浅析JavaScript函数的调用模式

    浅析JavaScript函数的调用模式

    这篇文章主要为大家详细介绍了JavaScript函数的调用模式,包括方法调用模式,构造器调用模式,apply/call调用模式,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 查找Oracle高消耗语句的方法

    查找Oracle高消耗语句的方法

    这篇文章主要介绍了查找Oracle高消耗语句的方法,需要的朋友可以参考下
    2014-03-03
  • 用js实现用户注册功能

    用js实现用户注册功能

    这篇文章主要为大家详细介绍了用js实现用户注册的简洁版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 利用JS实现浏览器的title闪烁

    利用JS实现浏览器的title闪烁

    经常可以看见的title里面的消息提示,下面是JS的一种实现方法,需要的朋友可以参考下
    2013-07-07
  • 浅谈javascript中的instanceof和typeof

    浅谈javascript中的instanceof和typeof

    这篇文章主要简单介绍了javascript中的instanceof和typeof的相关资料,需要的朋友可以参考下
    2015-02-02
  • 微信小程序实现树莓派(raspberry pi)小车控制

    微信小程序实现树莓派(raspberry pi)小车控制

    这篇文章主要为大家详细介绍了微信小程序实现树莓派(raspberry pi)小车控制,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论