栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

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

demo1


 名字: 
 {{name}}
 
 

 对应的js



通过打印$scope对象,看到其属性的确包含一个name的键值对。但是在在ionic项目的时候,我们同样是这样拿的:

demo2


 
  
   名字: 
   {{name}}
   
   
 


在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


 
  
   名字: 
   {{name}}
   
   
 


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


 
  
   名字: 
   {{name}}
   
   
 


经过做如此处理后,再点击button发现可以正常打印$scope.name的值。如果你不想用对象的属性这样来做,你有可以把绑定的时候绑定到其父作用域的scope里面,demo2的ctrl不变,页面上的代码改为如下:


 
  
   名字: 
   {{name}}
   
   
 


这样同样可以拿到$scope.name的值,至此问题解决。ng-repeat等如果出现此问题,同样可以如此处理。大家如果有其他的解决方案,欢迎留言提出。  

参考文章

ionic的ng-model无法获取值问题
深入理解angularjs的scope

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/94575.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号