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

ionic-v1
1

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:
http://play.ionic.io/app/9e42cfebf771

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.

2

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:

Solutions:

  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

3

@bengtler

The second advice works! Thank you man.
http://play.ionic.io/app/e124ab9bcbbe

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

Thank you for your help!