Success! My angular modal is now functioning properly.
https://i.sstatic.net/CUHpL.png
One thing to note is that the modal script must be placed within my index.html file for it to work:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
In my controller, I call this modal like so:
$scope.addRecipe = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'sm',
resolve: {
items: function () {
return $scope.items;
}
}
});
I encountered an issue when trying to move the modal script into a separate HTML file. The modal would no longer appear, even though the page would still gray out. I attempted placing the HTML file both in the root folder as well as in a separate directory, but had no luck. When using a separate file, I adjusted the templateUrl property and ID in the HTML:
'app/partials/recipeAdd.html'
Despite making these changes, the modal remains hidden. What am I overlooking?