【ionic】常见问题处理

一、脏数据

$scope.$apply()

二、广播

链接：angularJS 事件广播与接收

//发送广播
var notedurgress = 12；
$rootScope.$broadcast('pdfLoad',notedurgress);
//监听
$rootScope.$on('pdfLoad', function (event, results) {
    //results传递的数据
})

三、滚动到顶部

$ionicScrollDelegate.scrollTop();

 四、tab切换

<tab-slide-box tab="0" class="detail-tabs ub ub-f1 ub-ver" style="height: 100%;">
    <div class="tsb-icons bor-b-none" id="tsb-icons">
        <div class="tsb-ic-wrp">
            <ion-scroll direction="false" class="tsb-hscroll" >
                <div class="scroll">
                    <a class="s-btn-right"  on-tap="tabChange(0)">
                        <span  ng-class="{'active':slideHasChangeIndex == 0}" class="tab-item-text">123</span>
                    </a>
                    <a class="s-btn-left"   on-tap="tabChange(1)">
                        <span ng-class="{'active':slideHasChangeIndex == 1}" class="tab-item-text">567</span>
                    </a>
                </div>
            </ion-scroll>
        </div>

    </div>
    <ion-slide-box style="width:100%;" show-pager="false">
        <ion-slide>
            <ion-content>
            
            </ion-content>
        </ion-slide>
        <ion-slide>
            <ion-content>
            
            </ion-content>
        </ion-slide>
    </ion-slide-box>
</tab-slide-box>

 五、列表页底部有定位按钮时，会遮挡最后一条数据，合适位置加padding有效

六、在ionic中使用label标签失效，更换标签就可以啦

<label for="checkbox-whole">
    <div class="checkbox-tab">
        <input ng-change="checkboxArrOn(item)" ng-model="checkboxArrState" type="checkbox"  id="checkbox-whole">
    </div>
    <span>全选</span>
</label>

 七、获取当前路由名字

$state.current.name

八、滚动到某个位置

var mainScroll = $ionicScrollDelegate.$getByHandle('mainScroll');
mainScroll.scrollTo(0, 100, false);

 九、使用window.location.href 跳转页面，路由监控事件中失效

十、angularjs  获取dom 元素 场景一

 

 

课程分类中有5级分类，要求3，5级每个分类多余6行时《展示全部》按钮

原理：获取每个3/5级元素的高度，大于6行高度时给该项加一个isShowMoreButton 属性，并设置为true

遇到的问题：

　　1。需要在页面加载结束后才能获取到元素的高度

　　2。反复切换页面时，会获取到隐藏的dom元素，导致索引不能够一一对应，解决方案，进入页面的时候先清空元素，再新建元素

相关链接：angularjs执行ng-repeat判断完成状态，生成可复用性自定义指令

页面加载完成代码：

js

app.directive('onFinishRender', ['$timeout', afterNgRepeatRender]).controller();

function afterNgRepeatRender($timeout){
    return {
        restrict:'A',
        link:function($scope,ele,attr){
            if($scope.$last == true){ //scope.$last渲染完成后为true
                $timeout(function(){
                    $scope.$emit(attr.onFinishRender);
                    //scope.$emit('函数声明名')，接收一个字符串  子给父发通知
                    //如果div的on-finish-render属性值写成了函数调用的形式，则$emit会调用失败
                },800)
            }
        }
    }
}

html:

<div class="tree-three-box"
       on-finish-render="afterRightEditRepeat"                 
       ng-repeat="itemss in items.subdata track by $index">
</div>

父控制中，进入页面清空元素，最后一个遍历元素加载完成后获取元素高度，增加isShowMoreButton 属性逻辑

    $scope.$on('$stateChangeSuccess', function () {//多个课程分类相关页面切换时，dom数不对问题
        console.log('清空dom');
        for(var i =0; i < document.getElementsByClassName('tree-three-contain').length; i++){
            document.getElementsByClassName('tree-three-contain')[i].remove();//三级分类父级元素
        }
    });
    $scope.$on('afterRightEditRepeat', function(event){var oDivs = null;
        if($scope.isShowReclassifyFour){
            oDivs = document.getElementsByClassName('tree-five-height');
        } else {
            oDivs = document.getElementsByClassName('tree-three-height');
        }
        for(var i = 0; i < oDivs.length; i++){
            var isShowMore = oDivs[i] && oDivs[i].offsetHeight > 120;
            if(isShowMore && $scope.classifyCurrentItem.subdata[i]){
                $scope.classifyCurrentItem.subdata[i].isShowMoreButton = isShowMore;
            }
        }

    })

 

 

搜索

复制