angualr.js+ionic踩坑记录

最近在使用angular.js1.5+ionic1.0编写一个微信公众号.遇到了好几个坑,大家如果在开发中有遇到同样的问题,可以参考一下.如果有哪里写的不对,欢迎指正!

1.ng-modal不实时更新

angular.js的一大特性就是双向数据绑定,但是在使用的时候会遇到数据明明已经改变,但是视图却没有更新.断点调试发现ng-modal的值也确实已经改变

---

解决方案1:

html:

<select  ng-model="selectedWeek.value" ng-options="x.value as x.text for x in weeksLand">
    <option value="" selected hidden>请选择</option>
</select>

js:

$scope.selectedWeekLand = {"value":-1};     //首先要声明一下,否则会报错

$AsynAjaxHttp.publicAjax("GAIA.KZConsult.ArchitBP.Agent.GetWeekByYearBPProxy", { Year: $scope.selectedYearLand }).then(function (data) {

     $scope.weeksLand = data;
     //数据请求回来以后重置下拉框
     $scope.selectedWeekLand.value = -1;   //这样视图也就会跟着渲染了

});

解决方案2:

html:

<input ng-moadl="price" ng-change="priceChange(price)">

js:

$scope.
$scope.priceChange=function(price){
   //这样也能用户输入的内容
   console.log(price);
};

2.使用UI-Router引入局部视图时,加载全部局部视图

使用局部视图的原因是提高网页的性能,只有用户点击以后再进行加载.提高首页的性能.但是按照如下写法,发现会把所有的视图全部都进行加载.

 //首页
.state('tab.home', {
       url: '/home',
        views: {
              'tab-home': {
                  templateUrl: 'templates/home/Home.aspx',
                  controller: 'home',
               },
       },
      cache: 'true'
})

解决方案:
视图的路径不能直接使用字符串,否则都会进行加载

 //询价首页
.state('tab.enquiry-home', {
      url: '/enquiry-home',
      views: {
            'tab-enquiry-home': {
                 templateUrl: function () {
                 return 'templates/enquiry/Enquiry_home.aspx';
             },
             controller: 'enquiryHome',
            },
       },
       cache: 'false',
})

3.select在安卓点击失效

使用select制作下拉选择时,发现在安卓手机上点击失效,只有点击到特定的一点位置才能触发.

<select   ng-model="selectedWeek.value" ><select>

解决方案:data-tap-disabled=”true”
这是ionic框架的问题,需要使用其提供的解决方案做兼容

 <select data-tap-disabled="true" ng-model="selectedWeek.value" ><select>

如果不起作用,就加载select的父级元素上:

<div data-tap-disabled="true">
    <select data-tap-disabled="true" ng-model="selectedWeek.value" ><select>
</div>

4.上拉加载多次触发

在第一次自动调用时，如果加载的数据没有充满屏幕，会自动再调用一次，要是还没充满屏幕，会无限次请求数据
如果你不想多次跟后台交互，就定义请求的条目多点。

 <ion-content class="ranktitcontent">  
    <ion-list>  
      <div class=" row rankcontentbox" ng-repeat="item in items">  
          <div class="col col-25 txtcenter"><label ng-bind="$index+1">1</label></div>  
          <div class="col col-25 txtcenter"><label ng-bind="item.Name | limitTo:4">11111/label></div>  
          <div class="col col-25 txtcenter"><label ng-bind="item.TuiJianNumber">5</label></div>  
          <div class="col col-25 txtcenter "><label ng-bind="item.BuyPrice | number">100</label></div>  
      </div>  
    </ion-list>  
    <ion-infinite-scroll ng-if="!domore"   on-infinite="doRefresh()" distance="10%" ></ion-infinite-scroll>  
</ion-content>  



$scope.domore = false;  
        $scope.PageIndex = 0;  
        $scope.PageSize = 6;  
        $scope.userId = window.localStorage.getItem('userId');  
        $scope.items = [];  
$scope.doRefresh = function () {  
            $scope.PageIndex++;  
            var timer = null;  

            var param = {  
                method: "get",  
                url: "/Agent/GetPerformance",  
                params: { PageIndex: $scope.PageIndex, PageSize: $scope.PageSize, UserId: $scope.userId }  
            }  
            serviceRequest.query(param) // 同步调用，获得承诺接口    
            .then(function (data) {  // 调用承诺API获取数据 .resolve    
                if (data.result) {  

                    if (data.data) {  
                        if (data.data.AgentPerformance.length !== 0) {  
                            for (var i = 0; i < data.data.AgentPerformance.length; i++) {  
                                $scope.items.push(data.data.AgentPerformance[i]);  
                            }  

                        }  
                        if (data.data.AgentPerformance.length === 0) {  
                            $scope.domore = true;  
                        }  
                        timer = $timeout(function () {  
                            $scope.$broadcast('scroll.infiniteScrollComplete');  
                        }, 1500);  
                    } else {  
                        $scope.domore = true;  
                        $scope.$broadcast('scroll.infiniteScrollComplete');  
                    }  
                }  

                $scope.$broadcast('scroll.infiniteScrollComplete');  
            }, function (data) {  // 处理错误 .reject    
                $timeout.cancel(timer);  
            });  

            $scope.$on("$destroy", function () {  
                //clearTimeout(timer.$$timeoutId);  
                $timeout.cancel(timer);  
                //清除配置,不然scroll会重复请求  
            });  

5.禁止页面滑动 has-bouncing=”false”

<ion-view view-title="Dashboard">
  <ion-content class="padding" has-bouncing="false">
    <ion-scroll has-bouncing="false" style="width:100px;border:solid 1px red;" direction="x">
      <div style="width:200px;">
        ion-scroll实现滑动，用ionic自带的滑动组件实现滑动，ion-scroll其他属性可参考官网文档
      </div>
    </ion-scroll>
  </ion-content>
</ion-view>

6.多个上拉刷新

如果页面只需要一个上拉：

<ion-view view-title="商品管理">
    <ion-header-bar class="item-icon-left publicHead">
        <a class="icon ion-ios-arrow-left" href="javascript:history.go(-1)">
            <i></i>
        </a>
        <div>商品管理</div>
    </ion-header-bar>

    <ion-content  >
            <ul class="orderlist">
                <li class="clearfix" ng-repeat="good in goodList">
                   {{good.name}}
                </li>
            </ul>
            <ion-infinite-scroll immediate-check="false" ng-if="isAllLoadMore" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
    </ion-content>
</ion-view>

成功以后加上：

   $scope.$broadcast('scroll.infiniteScrollComplete');

如果页面中有多个上拉刷新，例如地址联动

<ion-view view-title="商品管理">
    <ion-header-bar class="item-icon-left publicHead">
        <a class="icon ion-ios-arrow-left" href="javascript:history.go(-1)">
            <i></i>
        </a>
        <div>商品管理</div>
    </ion-header-bar>

    <ion-content  >
       <ion-scroll >
            <ul class="orderlist">
                <li class="clearfix" ng-repeat="good in goodList">
                   {{good.name}}
                </li>
            </ul>
            <ion-infinite-scroll immediate-check="false" ng-if="isAllLoadMore" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
       </ion-scroll>
       <ion-scroll >
            <ul class="orderlist">
                <li class="clearfix" ng-repeat="good in goodList">
                   {{good.name}}
                </li>
            </ul>
            <ion-infinite-scroll immediate-check="false" ng-if="isAllLoadMore" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
       </ion-scroll>
    </ion-content>
</ion-view>