Non angular/ionic js code is not working when using ui-router

Hi all,

I have a main page and four sub-pages; using ui-router and ui-view directive. The sub pages are rendered inside main page.

Javascript code non containing to ionic/angular is not working on the sub page, although is working on the main page.

There is a prooof-of-concept:

There are two pieces of JS code using Vue.js; the 1st one is inside the main page and IS working, the 2nd one is inside the sub-page (page 4) and is NOT working.

Is there ANY way to fix this? Thanks.

What is your aim to use vue there?

Sorry but this will not work…

you are creating your “Vues” if some of the elements are rendered --> like the page4-template es rendered if you click on (4) --> before there is no element with the id 4 and i think vue does not support live-events.

the main-part works, because it is there all the time :wink:


  1. in your angular code --> listen on statechanges and call the Vue-Code for page4 if state is changed to page4.

  2. add a controller to page4 and create your Vue for page4 there


The second advice works! Thank you man.

The reason I want to use Vue.js is for its better performance (for example manipulating DOM inside SVG, …).

Thank you for your help!