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