bug: $ionicView's events in 1.3.x work diffirent

[Kopleman]

Type: bug

Ionic Version: 1.x

Platform: all

It's a duplicate of my previous issue that was closed. I'm sorry @danbucholtz for late reply, but in latest build(1.3.1) the issue still exists.

Here is pens: 1.1.1, 1.2.1, 1.3.1.
You can notice that in 1.1.x $ionicView.%%eventName%% events catchable in any controller that bound to the state, in 1.2.x its only catchable in last one. Maybe this is a bug or issue like i think but this change is not mantioned in docs. Thank you.

[danbucholtz]

Hi @Kopleman,

Can you explain what your issue is in a little more detail and keep it simple?

In 1.3.1, I changed the way life cycle events work so they reliably emit (bubble up) from the correct scope. In previous releases, this was all over the map. We wrote several thousand lines of test code to verify this. I am happy to help, just want to understand when you're seeing the issue.

This is the commit with the changes and the test code.
d637333#diff-82d6d3da2a7bb1d17947d4e25aa93923

Thanks,
Dan

[Kopleman]

Hi @danbucholtz , thank you for help.I've simplified pens: 1.1.1, 1.2.1, 1.3.1.

There you will find a state app with two views in it main,menu each with its own controller - MainCtrl for main and MenuCtrl for menu, they are quite equal.

Inside each controller i want to catch $ionicView.enter ($ionicParentView.enter for 1.3.x) event.

In 1.1.1 it works as entend I mean i can catch it in both controllers. In later versions event is catchable only in one. If I understood right it depends on the position of <ion-nav-view> in DOM. Event is catchable in controller that associated with last <ion-nav-view>.
I'll hope that will be hellpfull. Thank you and sorry for my bad english skills.

[danbucholtz]

I'll check it out tonight. Thanks!

[danbucholtz]

Hi @Kopleman,

It might be a couple days. I am really swamped right now. I will keep you posted.

Thanks,
Dan

[mark-veenstra]

Hi all,

We are also having issues with the new way the events work. To our opinion it is not working as we would expect or think is understandable. Maybe someone can have a look and tell us what we are doing wrong or if something else is wrong.

I have created a CodePen, which can be found here: http://codepen.io/mark-veenstra/pen/oLLXpZ?#

To explain the situation:

• Once you open the CodePen, click on "Venkman" to login
• You will be on the HOME tab. Click in the tabs below on the second tab, which brings you to the "CONTACT PAGE"
• On this page, you can click on "Click to go detail page". And the "CONTACT DETAIL PAGE" is openend
• In the JS console you will now see: $ionicView.afterLeave is FIRED from ContactController! and $ionicParentView.afterLeave is FIRED from ContactController!. Why is the $ionicParentView fired?
• If you now click on the "< BACK" button left-top, you will see in the JS console: $ionicView.afterLeave is FIRED from ContactDetailController! and $ionicParentView.afterLeave is FIRED from ContactDetailController! Why is the $ionicParentView.afterLeave fired?
• Now go ahead and click "Click to go detail page" again. So we are back on that state. But now instead of using the "< BACK" we will navigate to a different tab, for example click on the third tab. Why there is now no event fired at all? Why is this different then using the back button? I would expect to see the $ionicView.afterLeave been fired

If you chane the ionic bundle in the CodePen to use version 1.2.1 all did work as expected.
/cc @danbucholtz

Regards,

Mark

[danbucholtz]

Hi, been very busy with V2 stuff lately. I will take a look at this now.

[danbucholtz]

Hi @Kopleman,

$ionicParentView.enter, etc is only for when you are broadcast events downward. In 99% of the cases, you'll want to use $ionicView.enter and have the event emit upwards.

I am looking at the way your navigation logic is structured and see some issues. The two scopes listening for the event are not in the same "hierarchy".

<ion-side-menus>

    <ion-side-menu-content nav-router animation="slide-left-right">
      <ion-nav-bar class="bar-positive">
      </ion-nav-bar>
      <ion-nav-view name="main"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left" id="side-menu-left-content">
      <ion-nav-view name="menu"></ion-nav-view>
    </ion-side-menu>
  </ion-side-menus>

The two ion-nav-views are not parents to each other. They are peers. Thus, they cannot emit events up to each other, or broadcast events down to each other. Your best bet would be listening for those two events on $rootscope, or re-designing your hierarchy.

I updated the controller logic to look like this.

.controller('MainCtrl', function($scope, $rootScope, $state) {
    $scope.message = 'Foo';
    $rootScope.$on('$ionicView.enter', () => {
      console.log("Main Ctrl");
      $scope.message += ' Bar';
    });
  })
  .controller('MenuCtrl', function($scope, $rootScope, $state) {
    $scope.message = 'Foo';
    $rootScope.$on('$ionicView.enter', () => {
      console.log("Menu Ctrl");
      $scope.message += ' Bar';
    });
  })

and it works fine.

Thanks,
Dan

[danbucholtz]

@mark-veenstra, looking at your issue now. I'll reply in this thread even though I closed @Kopleman's issue.

[danbucholtz]

@mark-veenstra,

You found a legit bug.

$ionicParentView.enter and other parent-based life cycle events should not be used often. They are to be used exclusively when a child-view needs to know about a state change that it otherwise wouldn't be privy to knowing about since emitted events bubble up. Typically, you'll want to just use $ionicView.xyz.

Now go ahead and click "Click to go detail page" again. So we are back on that state. But now instead of using the "< BACK" we will navigate to a different tab, for example click on the third tab. Why there is now no event fired at all? Why is this different then using the back button? I would expect to see the $ionicView.afterLeave been fired

As far as the above, this is a bug. The issue is this line of code. In your case, the prefixes are not entirely the same. I need to give some thought to how to make since work nicely. Nav is really complicated with ui-router.

For now, let's keep this issue open. I'll give it some thought and update when I have a solution.

Thanks,
Dan