I have an angular app with a shared actionbar between ng-views:
<body>
<div ng-include src="'actionbar.html'"></div>
<div ng-view class='slideOutLeft'></div>
</body>
The ng-view has the 'slideOutLeft' class which animates the current view out to the left while animating a new view in from the right at the same time.
.slideOutLeft.ng-enter {
animation:slideInRight 0.5s both linear;
}
.slideOutLeft.ng-leave {
animation:slideOutLeft 0.5s both linear;
}
The problem is that the contents of the action bar can sometimes be wildly different between ng-views and it's extremely difficult to create a factory to use as a communication bridge between the controller on the ng-view and the actionbar which is a sibling of the ng-view. The obvious answer would be to put the actionbar inside of the ng-view that way each can be different for each view and the actionbar has access to view controller's scope. However, I don't want the actionbar to 'slideOutLeft' along with the ng-view. I just want the content of the actionbar to stay fixed while the ng-view below it is animating.
If I reorder my DOM so that
<div ng-include src="'actionbar.html'"></div>
is included in the template file for ng-view, is there anyway to prevent the actionbar from animating with the rest of the ng-view during page transitions?
