Custom directive based on ionic directives

1

In my app I have a few views, which look the same way:

<ion-view title={{title}}>
<ion-nav-buttons side="right"></ion-nav-buttons>
<ion-content class="has-header">
    <ion-refresher on-refresh="Refresh()" refreshing-icon="ion-ios7-reloading" pulling-icon="ion-ios7-arrow-thin-down">
    </ion-refresher>
    <ion-list>
    </ion-list>
</ion-content>
Only ion-item element is always different. I've tried to create my own directive: 
.directive('listView', ['$compile', function($compile) {
return {
    restrict: 'E',
    scope: {
        title: '@',
        buttons: '@',
        onRefresh: '&'
    },
    replace: true,
    transclude: true,
    template: '<ion-view title={{title}}>'+
                    '<ion-nav-buttons side="right"></ion-nav-buttons>'+
                    '<ion-content class="has-header">' +
                        '<ion-refresher on-refresh="{{onRefresh()}}" refreshing-icon="ion-ios7-reloading" pulling-icon="ion-ios7-arrow-thin-down">' +
                        '</ion-refresher>' +
                        '<ion-list ng-transclude></ion-list>' +
                    '</ion-content>' +           
                '</ion-view>',
        
    compile: function ($element, $attrs) {
        return function link($scope, $element, $attrs, ctrls) {
            
        };
    }
};

}]);

How should look like my compile method to allow ionic directive like ion-list render before mine? Now it does’nt work.

2

but what doesn’t work ? what do you you want to do?

3

I want to create template which will only shorten my code. Inside will be only ion-item element which changes every time depends on view. My problem are standard ionic directive like ion-view, ion-content etc. I guess that I have to do something special to render this element, beacuse template doesn’t work ( ion-view doesn’t work like ion-view, but like standard div).
To sum up I search method to shorten my code bases on ionic directives.

4

Any news about this? :slightly_smiling:

5

I have the same problem where I am trying to create one custom directive to be used in different views. But ionic directives like ion-view, ion-nav-title aren’t behaving the same as they usually behave. Not sure about the issue but if it had been working, it would have saved a lot of markup duplication and memory (while running app) as well. Please let me know the correct way if any.