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

Type: <span ionic-type>bug</span>

Ionic Version: <span ionic-version>1.x</span>

Platform: <span ionic-platform>all</span>

<span ionic-description>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.</span>

<span is-issue-template></span>

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 15 (10 by maintainers)

Most upvoted comments

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.

@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

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