I recently developed an app and tried using UI modal, but encountered an issue where the modal function couldn't locate the HTML template. I was able to log messages inside the function but was unable to open a modal view.
var app = angular.module('myApp', [
'angularUtils.directives.dirPagination',
'ui.bootstrap'
]);
app.controller('galleryCtrl', ['$scope', '$http', function ($scope, $http) {
}]).
controller('ModalInstanceCtrl',['$scope','$modal',function($scope, $modalInstance){
}]).
directive('myGallery', function ($http,$modal) {
return {
restrict: 'E',
scope: {
feed: '@',
search: '=?',
resultsPerPage: "=?",
sorting: "=?"
},
templateUrl: './MyGallery.tpl.html',
link: function (scope, element, attrs) {
scope.search = scope.search || true;
scope.sorting = scope.sorting || true;
scope.resultsPerPage = scope.resultsPerPage || 10;
console.log(scope.resultsPerPage);
scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: '/views/modal.html',
controller: 'ModalInstanceCtrl'
});
};
In the html code:
<div class="imgs">
<ul>
<li dir-paginate="img in imgs
| filter:query
| itemsPerPage: resultsPerPage.value || 10 ">
<a href=""><img ng-src="{{img.url}}" ng-click="openModal()"></a>
</li>
</ul>
</div>
When trying to access the modal, this error message shows up:
GET http://localhost:63342/views/modal.html 404 (Not Found)
Despite ensuring that the path is correct, the problem persists. Any insights on what might be causing this?