欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

郁悶!ionic中獲取ng-model綁定的值為undefined如何解決

 更新時(shí)間:2016年08月27日 16:53:31   作者:lishihong108  
很是郁悶!ionic中獲取ng-model綁定的值為undefined,如何解決?

今天在ionic中使用ng-model時(shí)候,在對(duì)應(yīng)的controller里面獲得值為undefined。以前在使用angularjs的ng-model綁定時(shí)候就可以拿到的啊,這就尷尬了,決定一探究竟。大家先看下面的一個(gè)demo。

在學(xué)習(xí)angularjs的ng-model的數(shù)據(jù)雙向綁定時(shí)候,我們通過(guò)以下的代碼拿到對(duì)應(yīng)的ng-model的值:  

demo1

<div ng-app="myApp" ng-controller="myCtrl">
 名字: <input ng-model="name">
 {{name}}
 <button ng-click="show()">shoName</button>
</div> 

 對(duì)應(yīng)的js

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.show=function(){
  console.log($scope.name);//可以正確的拿到頁(yè)面上輸入的值
  console.log(allPrpos($scope));
 };
 /*獲取某個(gè)對(duì)象的屬性*/
 function allPrpos(obj) { 
  // 用來(lái)保存所有的屬性名稱和值
  var props = "";
  // 開始遍歷
  for(var p in obj){ 
   if(typeof(obj[p])=="function"){ // 方法
   //console.log(obj[p]);
   }else{ 
   // p 為屬性名稱,obj[p]為對(duì)應(yīng)屬性的值
   props += p + "=" + obj[p] + "; ";
   } 
  } 
  // 最后顯示所有的屬性
  console.log(props);
 }
});
</script>

通過(guò)打印$scope對(duì)象,看到其屬性的確包含一個(gè)name的鍵值對(duì)。但是在在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對(duì)應(yīng)的controller.js的對(duì)應(yīng)的ChatsCtrl:

angular.module('starter.controllers', [])
.controller('ChatsCtrl', function($scope) {
 $scope.show=function(){
  console.log($scope.name);//控制臺(tái)打印undefined
  console.log(allPrpos($scope));
 };
});

在打印的$scope屬性里面并未發(fā)現(xiàn)name,控制臺(tái)打印undefined,頁(yè)面上{{name}}卻可以正常輸出來(lái),這是為何呢?估計(jì)很多ionic初學(xué)者在做項(xiàng)目中都遇到過(guò)這個(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);//控制臺(tái)可以正常打印每次input輸入框里面的值
  console.log(allPrpos($scope));
 };
});

這樣大家應(yīng)該就看出一些端倪了吧,其實(shí)一切問(wèn)題的根源就是scope。當(dāng)使用ng-model、ng-repeat等directive命令的時(shí)候,其本身會(huì)創(chuàng)建一個(gè)scope。其實(shí),這涉及到ionic的controller創(chuàng)建時(shí)機(jī)問(wèn)題,ionic視圖路由里面創(chuàng)建的controller的scope的作用域要比下面的demo2中MyChatCtrl的scope的作用域要大;原來(lái)這兩個(gè)scope是不同的,這也就解釋了上面demo2為何拿到的值為undefind。發(fā)現(xiàn)問(wèn)題了,如果解決這個(gè)問(wèn)題呢?

scope作用域是可以繼承的,js對(duì)象的屬性也是繼承的,所以我們可以稍微改下demo2,在剛才的ChatsCtrl先定義一個(gè)默認(rèn)值:  

var $scope.name={text:""};

在頁(yè)面上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)過(guò)做如此處理后,再點(diǎn)擊button發(fā)現(xiàn)可以正常打印$scope.name的值。如果你不想用對(duì)象的屬性這樣來(lái)做,你有可以把綁定的時(shí)候綁定到其父作用域的scope里面,demo2的ctrl不變,頁(yè)面上的代碼改為如下:

<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的值,至此問(wèn)題解決。ng-repeat等如果出現(xiàn)此問(wèn)題,同樣可以如此處理。大家如果有其他的解決方案,歡迎留言提出。  

參考文章

ionic的ng-model無(wú)法獲取值問(wèn)題
深入理解angularjs的scope

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論