How to check if a sub view is reloaded?

ionic-v1
1

I am using ui-router in angular js to nest views. A directive in one of my parent views requires to watch if a sub-view is reloaded. Can anyone tell me how would I watch if a sub-view inside a view is reloaded?

Here is my main View

<ion-pane>
<ion-header-bar class="bar-positive" my-directive="">
   // Header Elements
</ion-header-bar>
<ion-nav-view name="bodyContent" animation="slide-left-right"></ion-nav-view>

Here is my Sub View

<ion-content>
// Sub View Elements
</ion-content>

Finally here is my Directive

myApp.directive('myDirective', function(){
return function(scope,element,attr){
scope.$watch('$viewContentLoaded', function(){
    element.on("click", function(){
        // do something
    });

    element.parent().find('ion-content').on("click", function(){
        //do something
    })
});};})

Here, the $watch statement only watches the parent view load. What I need to do is to add the event listener for ion-content element everytime the sub view (bodyContent) is changed or reloaded.

Can anyone help me?

2

ui-router has stateChange events.

It should be possible to hang in your parent controller like that:

There you have 2 parameters: toState, FromState

if toState.name === fromState.name // state is reloaded

Not tested, but it should work… hopefully.

3

I used $stateChangeSuccess to check if the state has changed. That worked fine. I have been able to detect change in states.
But the $stateChangeSuccess event is fired before the DOM of the view is rendered. That is why the event listener binding does not occur. Is there a way to wait until the DOM of the view is rendered before binding the event listener?

Thanks.
Your help is much appreciated.

4

You can use $timeout to wait until the next angular digest run -> it should be after the dom is ready.

5

Just to post that I found a different solution. I didnt think using timeout was really a “classy” solution. So i did a little digging and went through all the variables that $stateChangeSuccess was returning. While digging through the event variable I saw the targetScope variable. I was then able to watch the $viewContentLoaded variable on the targetscope to see if the view has been loaded. the code looks something like this

scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
            event.targetScope.$watch('$viewContentLoaded', function(){
                var contentBody = element.parent().find("ion-content");
                var contentHead = element;

                contentHead.on("touchStart click", function(event){
                    //Do something
                });

                contentBody.on("touchStart click", function(event){
                    Do Something
                });
            });
       })

I hope this is gonna be useful to others as well.

@bengtler Thanks for helping and pointing me to the right direction. :smile:

1 Like
6

Nice and no probs :wink:

Do you know if $viewContentLoaded is an ionic thing or original angular?

Greets, bengtler

7

$viewContentLoaded is original angular as you can see here : https://docs.angularjs.org/api/ngRoute/directive/ngView