ionic中获取ng

liang1234_ 2017-05-25

展开全文

转载请注明出处：
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>