0

UPDATE

I am thinking of using the following solution, is this a good way?

I am working on a project that is being ported from wordpress to angularJS (will have later on its own backend). Some of the required javascript files that were already there must remain.

I am using angular ui router to keep the same routes that were there before, with states as the library requires.

Here is my issue, I have the following files loaded in the main 'index.html':

<script type='text/javascript' src='/wp-content/themes/twentyfourteen-child/assets/js/bootstrap.min0c54.js?ver=150923'></script>
<script type='text/javascript' src='/wp-content/themes/twentyfourteen-child/assets/js/svg-injector-min5b31.js?ver=4.3.1'></script>
<script type='text/javascript' src='/wp-content/themes/twentyfourteen-child/assets/js/bootstrap-select.min0c54.js?ver=150923'></script>
<script type='text/javascript' src='/wp-content/themes/twentyfourteen-child/assets/js/jquery.matchHeight.min0c54.js?ver=150923'></script>
<script type='text/javascript' src='/wp-content/themes/twentyfourteen-child/assets/js/imgw-mina8b3.js?ver=150526'></script>
<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/jquery-cycle2.min0c54.js?ver=150923'></script>
<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/scrollTo.min0c54.js?ver=150923'></script>
<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/imgw_home_scripts-min0c54.js?ver=150923'></script>

These files are required. Now when I route to a specific url, say for example: 

/a-new-url

which points to template:

/partial/a-new-url.html

So for example this template has a carousel that uses one of these javascript files, however the carousel doesn't work anymore unless i copy and paste the script tags inside the partial . Now this is a bad solution and will cause redundancy since i will have to do that with each different partial.

What is the correct way to handle and fix this issue?

Code for carousel (as requested)

in index.html have the following files in body tag:

<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/jquery-cycle2.min0c54.js?ver=150923'></script>
<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/scrollTo.min0c54.js?ver=150923'></script>
<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/imgw_home_scripts-min0c54.js?ver=150923'></script>

My investigation shows that this html is what loads it automatically based on "id=home-slideshow"

<div id="home-slideshow">
  <div id="slides" class="home-slider">
    <div class="slide" style="background-image: url(/wp-content/uploads/2014/05/home.jpg);">
    </div>
    <div class="slide" style="background-image: url(/wp-content/uploads/2014/05/1170780.jpg);">
    </div>
    <div class="slide" style="background-image: url(/wp-content/uploads/2014/05/ep.jpg);">
    </div>
  </div>
</div>
Community
  • 1
  • 1
Chad
  • 13
  • 1
  • 1
  • 4
  • need to create directives to run code that depends on elements existing when the code runs. `docment.ready` is virtually useless in angular – charlietfl Oct 28 '15 at 19:44
  • @charlietfl can you elaborate with an example? – Chad Oct 28 '15 at 19:55
  • lots of posts here and tutorials on web about initializing code in directives. Also strongly suggest reading : http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – charlietfl Oct 28 '15 at 20:12
  • @charlietfl check my update, is this a viable solution? – Chad Oct 28 '15 at 20:53
  • the main issue will be needing to create an angular directive so you can initialize the cycle plugin when the slider element exists. Your wordprss site likely has it set up with auto initializing data attributes and those won;t work on page load so you have to manually initialize plugin – charlietfl Oct 28 '15 at 20:55
  • solution you linked to has nothing to do with this situation – charlietfl Oct 28 '15 at 20:57

1 Answers1

0

I ended up using the following solution, which in my case is more than enough.

It might be better to use a directive but in my scenario this does the job.

Community
  • 1
  • 1
Chad
  • 13
  • 1
  • 1
  • 4