在angularjs中使用模式服务时引发错误

时间:2018-09-24 06:51:10

标签: angularjs asp.net-mvc

[![在此处输入图片描述] [1]] [1]我们将在angularjs中使用模式删除确认,但使用它时出现问题,并且出现错误“ angular.js:15018错误:[$ templateRequest: tpload]”,ModalService为:

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;
};}]);

控制器中的Delete看起来像这样:

$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;
                });
            });

现在,当我从控制器调用Delete函数时,会引发以下错误:

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)

我还使用了“ Appnam / app / modal.html”作为templateUrl,但无法解析。

1 个答案:

答案 0 :(得分:0)

我已经解决了我的问题,应该添加脚本<script src="~/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>