...
Navigation plugin can be modified to achieve the desired fix.
We could design a template for navigation buttons as in the Final design.
- Do a conditional rendering for the new template to avoid overlapping.
- if the customNavigation navigation is true then render the new template.
Code Block <div ng-show="customNavigationVisible" ng-controller="CustomNavigationCtrl"> <div ng-if="customNavigation"> <custom-next-navigation></custom-next-navigation> <custom-previous-navigation></custom-previous-navigation> </div> <div ng-if="customNavigation"> <custom-next-navigation-player></custom-next-navigation-player> <custom-previous-navigation-player></custom-previous-navigation-player> </div> </div>
Pros:
- We can design the template once and use wherever we want by using conditional rendering.
...
Diagram illustrating the Second Approach :
