I am interested in achieving the following:
Here is a snippet of code that I have:
<body ng-app="MyApp">
<div id="content"><button onclick="addCode()">Add Code</button></div>
</body>
The function "addCode()" does this using jQuery:
function addCode(){
$("content").html("<hello-world></hello-world>");
}
The hello-world tag represents an angular component and has the following code:
'use strict';
angular.module('MyApp', []).component('helloWorld', {
templateUrl: 'template.html',
controller: function () {
this.greet = 'Hello World';
}
});
Furthermore, the template.html contains the following code:
<p>{{$ctrl.greet}}</p>
I am wondering how to trigger the application after clicking the button so that "Hello World" appears in the web page instead of {{$ctrl.greet}} inside the paragraph.
In simpler terms, I want Angular to reload or re-bootstrap the document to dynamically load components tags.
This solution works perfectly when setting
<body><hello-world></hello-world></body>