ionic基于angular1的导航右侧按钮指令

ionic基于angular1的导航右侧按钮指令

在ionic中使用嵌套路由时,如果将ion-nav-bar放到首页,和嵌套页面公用一个导航栏,发现无法自由的定制导航的右侧按钮。

首页

<ion-nav-bar class="bar-stable index-bar" align-title="center">
            <ion-nav-back-button>
            </ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view animation="slide-left-right-ios7"></ion-nav-view>

嵌套页

<ion-view></ion-view>

因此自己写了一个公共指令,来解决这个问题,下面贴代码

html部分

<header-Btn-Right my-path="recordEdit" my-id="leftBtn" my-html="{{myHtml}}" on-Fun="save()">

    </header-Btn-Right>

directive部分

module.exports=function($rootScope,$http,$state,Request,$location){
    return {
        restrict: 'EA',
        replace: true,
        scope:{
            myPath:'@',
            myHtml:'@',
            myId:'@',
            onFun:'&'
        },
        link: function (scope, element, attrs) {
            var path = $location.path().replace('/','');
            /*监听路由改变*/
            $rootScope.$on('$stateChangeStart',
                function(event, toState, toParams, fromState, fromParams) {
                    console.log(event);
                    $('#'+scope.myId+'').remove();
                });
            if(path===scope.myPath){
                $('div[nav-bar="cached"] ion-header-bar').append(scope.myHtml);
                $('#'+scope.myId+'').on('click',function () {
                    scope.onFun();
                })
            }
        }
    }
}

这里写图片描述
基本思路是,通过判断location.path是否和mypath相同,来觉得是否添加按钮,myhtml决定来按钮样式,onFun决定来点击后执行的方法。通过全部root来监听路由改变,每次改变都将按钮清除。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值