It seems like the issue lies with the ng-enter event not being properly triggered in the lowest level of the ui view hierarchy. I'm unsure how to resolve this problem effectively.
In my extensive angularjs application, nested sub-views work flawlessly with animations as Users navigate through the app. However, when accessing a deep link (such as a page refresh) and clicking a button that triggers ng-enter/ng-leave, it doesn't activate on the correct Ui-view.
For instance, in our simplified template:
<ui-content ui-view="" layout-fill="" class="ng-scope"><!-- uiView: undefined -->
<ui-view class="ng-scope"><!-- uiView: -->
<div id="child-view" ui-view layout="column" layout-fill="" class="ng-scope">
<ui-view class="grandchild-view ng-scope">
<!-- template for grandchild-view -->
<div ng-if="isActive" class="page {{action}}">
<!-- HTML Content here -->
</div>
</ui-view>
</div>
</ui-view>
</ui-content>
During navigation to a page, there is a pop animation for the initial load, and upon pressing the next button, the
<ui-view class="grandchild-view ng-scope">I suspect that the ng-event fails to trigger appropriately in the correct ui-view. My observations indicate that upon the first button press post-refresh, the enter action occurs on the child view then the grandchild view (leading to incorrect animation), while subsequent presses only trigger it on the grandchild view (displaying the proper animation).
If anyone can provide insight on diagnosing this issue, we are utilizing ui-router's $state.$go for navigation, which includes passing parameters to set the controller class indicating the animation type.
$state.go($state.current.name, {
action: $scope.action
});
The possible actions include "open" (pop-in effect used transitioning from another section of the app), "next," and "previous" (for shifting pages within the grandChild view, differing only in slide direction).