Ionic events are not firing inside directives

Question

I want to execute a function after the view gets loaded/ after entering to that view.

My directory is as follows:

app.directive('bonFormViewerFrame', function ($formStore) {
return {
    restrict: 'E', //bind to element tag name
    replace: true, //replace the entire markup with the template
    templateUrl: 'ui/controls/bon-form-viewer-frame.html',
    scope: {
        form: '=' //specifies the item to be displayed.
    },
    controller: ['$scope', function ($scope) {

        $scope.formContent = ($scope.form != null) ? $scope.form.Content : "";

        $scope.$on("$ionicView.beforeEnter", function (event, data) {
            // handle event
            console.log("State Params: ", data.stateParams);
        });

        $scope.$on("$ionicView.enter", function (event, data) {
            // handle event
            console.log("State Params: ", data.stateParams);
        });

        $scope.$on("$ionicView.afterEnter", function (event, data) {
            // handle event
            console.log("State Params: ", data.stateParams);
        });


    }]
};

});

None of the above $ionicView events are firing. Can anyone help me out? Or what i'm doing wrong here?

This events are not sent to directive. You will need to send it from the controller of the page or think of an other mecanism may be with services to link the events and the directive — e666, Sep 13 '16 at 11:38

Maxim Shoustin · Answer 1 · 2017-10-19T09:31:23.073

None of the above $ionicView events are firing.

Well, if you will check ionic.bundle.js you can find following rows:

enteringScope.$emit('$ionicView.enter', enteringData);
enteringScope.$broadcast('$ionicParentView.enter', enteringData);

For ref:

$broadcast -- dispatches the event downwards to all child scopes,
$emit -- dispatches the event upwards through the scope hierarchy.

$ionicView uses $emit

The problem is, your directive has different scope - the child of your main controller

So you need $ionicParentView a.e.:

$scope.$on("$ionicParentView.beforeEnter", function (event, data) {
     // ...

});

Demo Plunker

Results:

~+~+~ CTRL~+~+~ 
CTRL: on beforeEnter
~+~+~ DIR ~+~+~
CTRL: on enter
DIR: on enter
CTRL: on afterEnter
DIR: on afterEnte

However if your directive load late and ionic broadcasts these events before your directive controller regestered to events - you have nothing to do with it

Well, I wish I had known that before I wasted half a day! Thanks! I'll grant you the bounty in a few hours, since I can't right now. — you786, Oct 19 '17 at 14:44

Ionic events are not firing inside directives

1 Answers1