ionic中獲取ng-model繫結的值undefined?
轉載請註明出處:http://blog.csdn.net/lishihong108/article/details/52225933
lishihong的部落格
今天在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等如果出現此問題,同樣可以如此處理。大家如果有其他的解決方案,歡迎留言提出。