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来监听路由改变,每次改变都将按钮清除。