今天在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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]