I'm having trouble creating a modal using AngularJS components as it keeps showing the error "Failed to load the HTML file".
Any suggestions on how to resolve this issue?
In addition, I'm also encountering the following error: angular.js:14642 Error: [$compile:tpload]
and it appears twice.
If anyone has any ideas on how to fix this and can explain where the mistake might be, I would greatly appreciate it.
Below are the files I am working with:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Bootstrap Modal using Component</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="component.js"></script>
</head>
<body>
<div>
<button type="button" class ="btn btn-danger" data-toggle="modal" data-target="#logBTModal">What's New</button>
<!-- Modal Starts -->
<log-modal></log-modal>
</div>
</body>
</html>
app.js
(function(){
'use strict';
var app = angular.module('myApp', []);
})();
Component.js
var app = angular.module('myApp');
app.component("logModal", {
templateUrl: "logModalTemp.html",
bindings: { name: '@'},
controller: function(){
this.title = "This is the first Modal that I have created!!"
}
});
LogModalTemp.html
<script type="text/ng-template" id="logModalTemp.html">
<div id="logBTModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{$ctrl.title}}</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
</div>
</div>
</div>
</script>