今天在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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。