After $ionicTabsDelegate, when do I get access to the document's elements (getElementByID, etc)

1

Hey all,

I’m trying to make an auto-tab and auto-scroll controller which automatically takes the user to a specific element in a specific tab based on what time it is.

I was doing this by using $ionicTabsDelegate followed by delegate.scrollBy, however to get my scrollBy properties I need to find where an element is in the page so I used document.getElementByID.

So the code is as follows:

$ionicTabsDelegate.select(tab);

element = document.getElementById(current_menu_key).getBoundingClientRect().top;
navbar = document.getElementById('navbar').getBoundingClientRect().bottom;
scroll = element - navbar; 

delegate.scrollBy(0, scroll, true);

The second line in the above code gives an error.
It appears that $ionicTabsDelegate has not switched the tab yet so the element I’m looking for isn’t there.

I went to check when my element becomes available and it seems that it doesn’t until after the controller ends.

Does anyone have this same problem? And is there a solution?

2

Any chance you could throw this into a codepen?

3

I forked an example on codepen that should show my issue well enough, tell me if it doesn’t.

What you’ll see is that the second function (alert in the codepen, getElementById in my app) runs before the tab is switched, but I need that second function to run after the app switches to the new tab.

Don’t worry about the tab not rendering properly.

Here’s the codepen: http://codepen.io/anon/pen/wbkaG

4

So going from that codepen you would want to the following to happen.

Using starts on one tab, selects the about tab, goes to the contact tab, then run alert?

5

Yeah that’s the flow I need!

Because in my app I have a getElementById instead of the alert and I need the tab to switch otherwise the app won’t be able to access the element I need because it’s not there yet.

6

Alright, well what you could do is something like this

7

At first I was skeptical that would work. But I tried it, and had a moderately rough time implementing it but it worked in the end.

Thanks!

I accomplished it exactly like your codepen but I linked the controller to the tab element in the html.

So the template has two controllers working in it, one through app.js (ui.router) and another inline (accomplished using ng-controller).

The main controller from app.js figures out which tab to switch to and then the inline controller figures out where to scroll to and executes the scroll.

Hopefully that was clear enough so that others dealing with a similar issue can understand. :smile: