ionic+angular项目总结一

1.inoic主页内的路由，页面名不需要添加html后缀名

2.tab选项卡的title内可嵌套标签，亦可更改其文字样式

3.可用子元素选择器添加css样式

例：用伪类添加其左边框.consult-tab>.tabs>a:after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    border-left: 1px solid #ccc;
}

4.ion_nav-bar可添加在ion-view中，不需在index添加

5.二级路由的建立：在总路就是文件再写一个二级页面路由,二级路由html文件内需要增加试图的区域添加<ion-nav-view></ion-nav-view>试图承载标签  列：

 //news页总路由
        .state('news', {
            url: '/news',
            views:{
                '':{
                    templateUrl: "templates/news.html"
                }
            }
        })
        .state('news.tuwenxiangqing', {
            url: '/tuwenxiangqing',
            templateUrl: 'templates/tuwenxiangqing.html'
        })
        .state('news.chanpincanshu', {
            url: '/chanpincanshu',
            templateUrl: 'templates/chanpincanshu.html'
            //controller:'chanpincanshuController'


        })

6.二级路由默认跳转指定页面时在路由页面的控制器中添加 $state.go('news.tuwenxiangqing')  列：

.controller('newsController',function($scope,$state){
        $state.go('news.tuwenxiangqing')
    })

7.已tab导航栏为模板的其他页面路由：注views下的‘tab-home’里可设置主页或同级导航的页面名  列：

 .state('tab.shangpinpingjia', {
            url: '/shangpinpingjia',
            views:{
                'tab-home':{
                    templateUrl: "templates/shangpinpingjia.html",
                    controller:'shangpinpingjiaController'


                }


            }


        })

8.angular js 想要操作dom时，必须写一个自定义指令，列如滑动固定tab 的导航例子：

 appModule.directive('topTabnav',function($rootScope){
        return{
            restrict:'A',
            scope:'',
            template:'',
            replace:true,
            link:function(scope,element,attrs){
               var raw= element.parent('ion-content').eq(0).parent();
                console.log(raw);
               //var flag= /translate3d\(\d+px,\s*(\d+)px,\s*(\d+)px\)/.exec(transform);
                //console.log(flag);
                    ///translate3d\(\d+px,\s*(\d+)px,\s*(\d+)px\)/i)[1]
               // console.log(transformY)-{0,1};
                var sub=[];
                console.log(sub);
                raw.on('scroll',function(){
                   var transForm=raw[0].children[0].style.transform;
                   var transFormY = transForm.match(/translate3d\(-{0,9}\d+px,\s*(-{0,9}\d+)px,\s*(-{0,9}\d+)px\)/i)[1];
                   var  tabTop = element[0].offsetTop;
                    var csstop=element.css('top');
                    if(tabTop==parseInt(csstop)) {
                        sub.push(parseInt(csstop));
                    }
                    //console.log(-transFormY);
                    //element.css('margin-top',-transFormY+'px');
                    //var E=element[0].firstElementChild;
                    if ( -transFormY>=tabTop) {
                        element.addClass("tabBar");
                        element.css('top',-transFormY+'px');
                    }else if(-transFormY>=sub[0]){
                        element.addClass("tabBar");
                        element.css('top',-transFormY+'px');
                    }else if(-transFormY<sub[0]){


                        element.removeClass("tabBar");
                    }
               });
            }
        }

9.ionic做弹出层。例子：点击图片弹出详情页面；html内容写在<ion-modal-view></ion-modal-view>模板内，用$ionicModal模态对话框来做

$ionicModal.fromTemplateUrl('templates/tuwenxiangqing-01.html',{
            scope:$scope,
            animation: 'silde-in-up'
        }).then(function(modal){
            $scope.modal = modal;
        });
        $scope.openModal=function(){
            $scope.modal.show();
        };
       $scope.closeModal=function(){
           $scope.modal.hide();
       }

10.$ionicPopup的cssClass附加的CSS样式类可以在html代码中插入css类，就可在编辑popup样式     例：

 .controller('OneKeyOderLaterCtr',function($scope,$ionicPopup,$http){
        //确认弹出框
        $scope.showConfirm=function(){
            $ionicPopup.show({
                title:'温馨提示',
                template:'全顺正在联络代驾司机为您服务，确定现在取消订单？',
                scope: $scope,
                cssClass :"OneKeyOderLater",
                buttons:[{ text: "确定"},
                    {text:"继续等待",
                     type:"button-positive"
                    }
                ]
            })


        }