ionicView.enter not fired on child view and its controller

Question

I have two nested states, consisted of a parent abstract state and a child state:

.state('app.heatingControllerDetails', {
                url: "/clients/:clientId/heatingControllers/:heatingControllerId",
                abstract: true,
                views: {
                    'menuContent': {
                        templateUrl: "templates/heatingController.html",
                        controller: 'HCDetailsCtrl'
                    }
                }
            })
.state('app.heatingControllerDetails.wdc', {
                url: "/wdc",
                views: {
                    'hc-details': {
                        templateUrl: "templates/heatingControllers/wdc.html",
                        controller: 'WdcDetailsCtrl'
                    }
                },
                resolve:{
                    hcFamily: [function(){
                        return 'wdc';
                    }]
                }
            })

and two controllers are:

   .controller('HCDetailsCtrl',function($scope){
        $scope.$on("$ionicView.enter", function (scopes, states) {
        ...
        });
     })
    .controller('WdcDetailsCtrl',function($scope){
        $scope.$on("$ionicView.enter", function (scopes, states) {
        ...
        });
     })

When I invoke state app.heatingControllerDetails.wdc, both controllers are created, but $ionicView.enter is only invoked on the parent controller. Any idea?

In heatingController.html, hc-details view is defined as follows:

<ion-content class="has-header" ng-show="hc">
    <div ui-view name="hc-details"></div>
    <div class="disableContentDiv" ng-hide="hc.state=='Online'"></div>
</ion-content>

You may want to look at angular $broadcast so you can announce to the child view the parent has been ionicView.enter'd: http://stackoverflow.com/questions/19446755/on-and-broadcast-in-angular and https://docs.angularjs.org/api/ng/type/$rootScope.Scope — Harry B, Aug 13 '15 at 07:55

score 0 · Answer 1 · answered Aug 19 '15 at 07:05

0

When working with nested views, you have to use $ionicNavView events instead of $ionicView

That being said, at the last release these events are bugged, and they're currently working in a fix: Github issue

answered Aug 19 '15 at 07:05

olivarra1

3,269
3
23
34

In index.html, I am using `ion-nav-view` (for the main view) but I don't think this is appropriate for a nested view - i.e. nesting one navigation view within another? – Gregor Srdic Aug 20 '15 at 07:32
Nono, what I meant is that you should subscribe to `"$ionicNavView.enter"` event from your nested view controller instead of `"$ionicView.enter"`. It looks like `$ionicView` events are for top-level views, whereas `$ionicNavView` events are for nested views. They have it bugged anyway (as provided by the github issue), and I think that would be a nice if they kept `$ionicView` events for nested views as well... But probably there's some reason why they separated them? – olivarra1 Aug 20 '15 at 07:44
Oh, I apologize, should've read better. Will try that, thanks! – Gregor Srdic Aug 21 '15 at 14:54

score 0 · Answer 2 · answered Dec 19 '16 at 21:34

I found a work around for this. Place this in a parent of the view, or place it in the first controller that is loaded when running your application. You can use this to observe any 'to and from' view changes. Just doing a string comparison on the url of the toState emulated ionicView.enter well enough to achieve what I needed it for. Keep in mind you need to be using UI-router to do this. Hope this helps!

$rootScope.$on('$stateChangeStart', 
    function(event, toState, toParams, fromState, fromParams, options){ 
        if(toState.url == "/video/:Id"){
            console.log("Leaving the view.");
        }
    });

ionicView.enter not fired on child view and its controller

2 Answers2