Menu icon Foundation
Run function on *template* load.

I seem to be able to run any jQuery and JavaScript that I want on the initial load of the app. However, I can't for the life of me get a function to load after a non-home template page loads.

I've tried:

  • Using onLoad in a template div
  • Using ng-init in a template div
  • Placing {{function()}} within the template
  • Placing <script>function()</script> all over the template
  • Using .ready(), $(document).ready(), and $(document).foundation()

Right now, the function is just console.log("ok") and I'm getting nothing.


I'd imagine this is an Angular issue, but I'm extremely inexperienced with Angular so could use a a fairly thorough answer, if possible.

Thanks in advance.

javascriptjqueryangularonloadinit

I seem to be able to run any jQuery and JavaScript that I want on the initial load of the app. However, I can't for the life of me get a function to load after a non-home template page loads.

I've tried:

  • Using onLoad in a template div
  • Using ng-init in a template div
  • Placing {{function()}} within the template
  • Placing <script>function()</script> all over the template
  • Using .ready(), $(document).ready(), and $(document).foundation()

Right now, the function is just console.log("ok") and I'm getting nothing.


I'd imagine this is an Angular issue, but I'm extremely inexperienced with Angular so could use a a fairly thorough answer, if possible.

Thanks in advance.

Brian over 3 years ago

This is likely not as detailed as you were hoping, but your answer lies within the ui-router.  You can subscribe to the $stateChangeStart event which will inform you when a new state is being loaded.  The front-matter used by foundation apps will configure the state. If you need to do something special for a certain state, you can check the state name in your $stateChangeStart handler.