ionic中獲取ng

liang1234_ 2017-05-25

展開全文

轉(zhuǎn)載請注明出處：
http://blog.csdn.net/lishihong108/article/details/52225933
lishihong的博客

　　今天在ionic中使用ng-model時候，在對應(yīng)的controller里面獲得值為undefined。以前在使用angularjs的ng-model綁定時候就可以拿到的啊，這就尷尬了，決定一探究竟。大家先看下面的一個demo。
　　在學習angularjs的ng-model的數(shù)據(jù)雙向綁定時候，我們通過以下的代碼拿到對應(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));
   };
   /*獲取某個對象的屬性*/
   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對象，看到其屬性的確包含一個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對應(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}}卻可以正常輸出來，這是為何呢？估計很多ionic初學者在做項目中都遇到過這個情況，是不是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里面重新定義一個MyChatCtrl：

angular.module('starter.controllers', [])
.controller('MyChatCtrl', function($scope) {
    $scope.show=function(){//點擊button
       console.log($scope.name);//控制臺可以正常打印每次input輸入框里面的值
       console.log(allPrpos($scope));
   };
});

　　這樣大家應(yīng)該就看出一些端倪了吧，其實一切問題的根源就是scope。當使用ng-model、ng-repeat等directive命令的時候，其本身會創(chuàng)建一個scope。其實，這涉及到ionic的controller創(chuàng)建時機問題，ionic視圖路由里面創(chuàng)建的controller的scope的作用域要比下面的demo2中MyChatCtrl的scope的作用域要大；原來這兩個scope是不同的，這也就解釋了上面demo2為何拿到的值為undefind。發(fā)現(xiàn)問題了，如果解決這個問題呢？
　　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>

　　經(jīng)過做如此處理后，再點擊button發(fā)現(xiàn)可以正常打印$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>