郁悶!ionic中獲取ng-model綁定的值為undefined如何解決
今天在ionic中使用ng-model時(shí)候,在對應(yīng)的controller里面獲得值為undefined。以前在使用angularjs的ng-model綁定時(shí)候就可以拿到的啊,這就尷尬了,決定一探究竟。大家先看下面的一個(gè)demo。
在學(xué)習(xí)angularjs的ng-model的數(shù)據(jù)雙向綁定時(shí)候,我們通過以下的代碼拿到對應(yīng)的ng-model的值:
demo1
<div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> {{name}} <button ng-click="show()">shoName</button> </div>
對應(yīng)的js
<script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.show=function(){ console.log($scope.name);//可以正確的拿到頁面上輸入的值 console.log(allPrpos($scope)); }; /*獲取某個(gè)對象的屬性*/ function allPrpos(obj) { // 用來保存所有的屬性名稱和值 var props = ""; // 開始遍歷 for(var p in obj){ if(typeof(obj[p])=="function"){ // 方法 //console.log(obj[p]); }else{ // p 為屬性名稱,obj[p]為對應(yīng)屬性的值 props += p + "=" + obj[p] + "; "; } } // 最后顯示所有的屬性 console.log(props); } }); </script>
通過打印$scope對象,看到其屬性的確包含一個(gè)name的鍵值對。但是在在ionic項(xiàng)目的時(shí)候,我們同樣是這樣拿的:
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對應(yīng)的controller.js的對應(yīng)的ChatsCtrl:
angular.module('starter.controllers', []) .controller('ChatsCtrl', function($scope) { $scope.show=function(){ console.log($scope.name);//控制臺打印undefined console.log(allPrpos($scope)); }; });
在打印的$scope屬性里面并未發(fā)現(xiàn)name,控制臺打印undefined,頁面上{{name}}卻可以正常輸出來,這是為何呢?估計(jì)很多ionic初學(xué)者在做項(xiàng)目中都遇到過這個(gè)情況,是不是angularjs的數(shù)據(jù)雙向綁定在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里面重新定義一個(gè)MyChatCtrl:
angular.module('starter.controllers', []) .controller('MyChatCtrl', function($scope) { $scope.show=function(){//點(diǎn)擊button console.log($scope.name);//控制臺可以正常打印每次input輸入框里面的值 console.log(allPrpos($scope)); }; });
這樣大家應(yīng)該就看出一些端倪了吧,其實(shí)一切問題的根源就是scope。當(dāng)使用ng-model、ng-repeat等directive命令的時(shí)候,其本身會創(chuàng)建一個(gè)scope。其實(shí),這涉及到ionic的controller創(chuàng)建時(shí)機(jī)問題,ionic視圖路由里面創(chuàng)建的controller的scope的作用域要比下面的demo2中MyChatCtrl的scope的作用域要大;原來這兩個(gè)scope是不同的,這也就解釋了上面demo2為何拿到的值為undefind。發(fā)現(xiàn)問題了,如果解決這個(gè)問題呢?
scope作用域是可以繼承的,js對象的屬性也是繼承的,所以我們可以稍微改下demo2,在剛才的ChatsCtrl先定義一個(gè)默認(rèn)值:
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>
經(jīng)過做如此處理后,再點(diǎn)擊button發(fā)現(xiàn)可以正常打印$scope.name的值。如果你不想用對象的屬性這樣來做,你有可以把綁定的時(shí)候綁定到其父作用域的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等如果出現(xiàn)此問題,同樣可以如此處理。大家如果有其他的解決方案,歡迎留言提出。
參考文章
ionic的ng-model無法獲取值問題
深入理解angularjs的scope
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- ionic實(shí)現(xiàn)滑動的三種方式
- ionic實(shí)現(xiàn)可滑動的tab選項(xiàng)卡切換效果
- Ionic實(shí)現(xiàn)仿通訊錄點(diǎn)擊滑動及$ionicscrolldelegate使用分析
- ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例
- url重寫IIRF(Ionic''s Isapi Rewrite Filter)手冊
- Ionic2系列之使用DeepLinker實(shí)現(xiàn)指定頁面URL
- Ionic如何實(shí)現(xiàn)下拉刷新與上拉加載功能
- ionic js 模型 $ionicModal 可以遮住用戶主界面的內(nèi)容框
- Ionic快速安裝教程
- Ionic3 UI組件之Gallery Modal詳解
相關(guān)文章
javascript實(shí)現(xiàn)延時(shí)顯示提示框特效代碼
本文給大家分享的是javascript通過setTimeout實(shí)現(xiàn)延時(shí)顯示提示框的特效代碼,效果非常棒,這里推薦給大家2016-04-04通過隱藏iframe實(shí)現(xiàn)無刷新上傳文件操作
本文給大家介紹iframe無刷新上傳文件,通過一個(gè)隱藏的iframe來處理上傳操作我采用的是ReactJS,amazeui,nodejs1.html target指向iframe的name,就是把上傳后的操作交給iframe來處理2016-03-03使用js判斷TextBox控件值改變?nèi)缓蟪霭l(fā)事件
這篇文章主要介紹了使用js判斷TextBox控件值改變?nèi)缓蟪霭l(fā)事件。需要的朋友可以過來參考下,希望對大家有所幫助2014-03-03js實(shí)現(xiàn)屏幕自適應(yīng)局部代碼分享
這篇文章主要介紹了js實(shí)現(xiàn)屏幕自適應(yīng)局部代碼分享,需要的朋友可以參考下2015-01-01Input 特殊事件onpopertychange和oninput
onpopertychange和oninput的區(qū)別。2009-06-06