jonnie jonnie - 3 months ago 21
AngularJS Question

ng-enter not triggering on ui-view which is child of another ui-view on page refresh

I think this is to do with the ng-enter event not being trickled down to the lowest ui view but not sure how I can correctly fix the issue.

I have a large angularjs application with sub-views within sub-view and all the animation works perfectly when the User navigates throughout the app. The problem is when I access a deepLink (e.g. a simple page refresh) and click the button that triggers the ng-enter/ng-leave it doesn't seem to trigger on the correct Ui-view

for example in the simplified template we are using:

<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>


When I navigate to the page it does a pop animation for the first load and when I press the next button the ui-view
<ui-view class="grandchild-view ng-scope">
should slide to the next item. This all works as expected when navigating to page but when We access the deeplink the pop animation seems to happen again when I press the button to slide next, this only happens once, after it behaves as expected.

I believe this is an issue with ng-event not triggering on the correct ui-view because I add logs to the what I seemed to notice was on pressing the button the 1st time after a refresh the enter is triggered on the child view then the grandchild view (show incorrect animation) but on subsequent button pressed it is only isn't triggered on the child view, just the grandchild view (shows correct animation)

can anyone advise on how I might figure this out, if it makes an different we are using ui-router
state.$go
to navigate which passes a param to set the class in the controller used to indicate the animation

$state.go($state.current.name, {
action: $scope.action
});


action could be open (pops the page in and is use when coming from another area of the application) next and pervious (when changing the page within the grandChild view, only difference is the direction they slide from)

Answer

I have had the same problem, it seems there is a bug somewhere with the inserted/nested ui-views not triggering ng-animations correctly. In order to work around it I do a targetted reload on the state that inserts the new ui-views:

$state.go('app.state_inserting_ui', {}, {reload: 'app.state_inserting_ui'});