I have a website full of exercises. I'm using jQuery load() to load parts of pages when a link on my website is clicked.
This takes the relevant part of the wanted page (the exercise itself) and puts it in a div for the user to interact with. While this works wonderfully for most of the website, since the vast majority is written in php, I'm trying to get it to work with the parts that use AngularJS as well.
I used this question as a starting point: AngularJS + JQuery : How to get dynamic content working in angularjs
It worked fairly well but only for one exercise. I think that manually bootstrapping angularJS could fix my problem but so far have had issues. How can I manually bootstrap my angular app upon jQuery load?
Here's some of what I've tried so far but it doesn't work:
irscript.js (ir is the name of the exercise) relevant code:
var ir = angular.module("ir", []);
ir.controller('MainCtrl', function($scope) {
//application logic.
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['ir']);
});
index.html relavent code:
<script>
$("#content").load(String(url + " #exercise"), function(){
$.getScript("irscript.js")});
</script>
<div id="content"></div>
The hope is that irscript.js can be replaced by a function that returns the proper script for the loaded exercise at some point but just getting the above to work would be amazing.
