CODEWITHSUNDEEP
angularjsasp.net-mvc
sadori
sadori

Reputation: 85

Error is raised when using modal service in angularjs

[![enter image description here][1]][1]We are going to use modal delete confirmation in angularjs but there is a problem for using it and error "angular.js:15018 Error: [$templateRequest:tpload]" is raised, the ModalService is:

app.service("ModalService", ['$uibModal', function ($uibModal) {
var modalDefaults = {
    backdrop: true,
    keyboard: true,
    modalFade: true,
    templateUrl: "/app/modal.html"

};

var modalOptions = {
    closeButtonText: 'Close',
    actionButtonText: 'OK',
    headerText: 'Proceed?',
    bodyText: 'Perform this action?'
};

this.showModal = function (customModalDefaults, customModalOptions) {
    if (!customModalDefaults) customModalDefaults = {};
    customModalDefaults.backdrop = 'static';
    return this.show(customModalDefaults, customModalOptions);
};

this.show = function (customModalDefaults, customModalOptions) {
    //Create temp objects to work with since we're in a singleton service
    var tempModalDefaults = {};
    var tempModalOptions = {};

    //Map angular-ui modal custom defaults to modal defaults defined in service
    angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

    //Map modal.html $scope custom properties to defaults defined in service
    angular.extend(tempModalOptions, modalOptions, customModalOptions);

    if (!tempModalDefaults.controller) {
        tempModalDefaults.controller = function ($scope, $uibModalInstance) {
            $scope.modalOptions = tempModalOptions;
            $scope.modalOptions.ok = function (result) {
                $uibModalInstance.close(result);
            };
            $scope.modalOptions.close = function (result) {
                $uibModalInstance.dismiss('cancel');
            };
        };
    }

    return $uibModal.open(tempModalDefaults).result;
};}]);

And Delete in controller is looke like this:

$scope.deletePerson = function (personID) {

        var modalOptions = {
            closeButtonText: 'Cancel',
            actionButtonText: 'Delete Customer',
            headerText: 'Delete ' + 1 + '?',
            bodyText: 'Are you sure you want to delete this customer?'
        };

        ModalService.showModal({}, modalOptions)
            .then(function (result) {
                var result = PersonService.deletePerson(personID);
                result.then(function (res) {
                    $location.path("/");

                }, function (error) {
                    $scope.error = error;
                });
            });

Now when I invoke the Delete function from the controller following error is raised :

angular.js:15018 Error: [$templateRequest:tpload] http://errors.angularjs.org/1.7.2/$templateRequest/tpload?p0=uib%2Ftemplate%2Fmodal%2Fwindow.html&p1=404&p2=Not%20Found
    at angular.js:99
    at angular.js:20721
    at angular.js:17396
    at m.$digest (angular.js:18557)
    at m.$apply (angular.js:18945)
    at k (angular.js:12799)
    at V (angular.js:13056)
    at XMLHttpRequest.A.onload (angular.js:12961)

I have also used "Appnam/app/modal.html" for templateUrl but it did not resolve.

Upvotes: 0

Views: 123

Answers (1)

sadori
sadori

Reputation: 85

I have resolved my issue, script <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script> should be added.

Upvotes: 1

Related Questions