angularjs dynamically change footer

Question

In my app for android I have multiple html's, most of them have the same footer with three icons, but some of the pages have different footers with 2 or 3 icons.

What is the correct way to accomplish this?

Because I would like to maintain mu ion-footer-bar in the main.html with the ion-header-bar, ion-nav-bar and ion-nav-view(where are showed all htmls).

I've tried to use a sort of ng-repeat with conditional reading of a structure depending on the current page, also using a tabs.html with different sections with different id's, none of the two solutions is working and I messed to much the code, so while I continue trying I would like to know if one of these approximations is correct.

thanks

Answer 1

You could use ng-show and ng-include to conditionally load in the right template from a set of footer html templates.

<div ng-show="$scope.template == 'footer_one'" >
    <div ng-include src="'/partials/footer_one.html'"></div>
</div>
<div ng-show="$scope.template == 'footer_two'" >
    <div ng-include src="'/partials/footer_two.html'"></div>
</div>

You'd need to programmatically set the $scope.template variable based on some condition in the controller.