Currently, I am integrating angularjs into a website that is already using jquery to load content asynchronously. The content is loaded and then appended to the DOM using jQuery instead of AngularJS. Here is an example of what I have:
function loadContent () {
$("#target").html("<my-directive></my-directive>");
}
var app = angular.module("app", []);
app.directive("myDirective", function () {
return {
restrict: "E",
template: "my-directive is loaded"
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app">
<my-directive></my-directive>
<button onclick="loadContent()">load content</button>
<div id="target"></div>
</div>My question is, can the $compile function be used with jQuery? Is there a way to make this work?
I understand that ideally, all the data should be managed within Angular, but at the moment it is not feasible due to existing constraints. Hence, I am seeking a solution to this issue.
NOTE: This is a simplified example; in reality, my situation involves more complex scenarios with controllers and other Angular components in the dynamically loaded HTML.