Question

我是ui-bootstrap的新手并使用ui-bootstrap-tpls-0.13.0.min.js并出错。使用$ modal我有一个加载错误加载模板文件：./ template / modal / window.html

我没想到会出现这个错误。

我认为图书馆内置了模板。太累了，不正确地阅读文档？

Error: [$compile:tpload] http://errors.angularjs.org/1.3.14/$compile/tpload?p0=template%2Fmodal%2Fwindow.html
M/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
d/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:136:257
f/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:112:20
Pe/this.$get</l.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:125:301
Pe/this.$get</l.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:122:390
Pe/this.$get</l.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:126:56
l@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:81:169
S@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:85:301
vf/</e@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:86:366

http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js
Line 102

代码取自Dan Wahlin's example：

选项：

tempModalDefaults{"backdrop":"static","keyboard":true,"modalFade":true,"templateUrl":"/MobileCOP/tmpl/dfltmodal.html"}
tempModalOptions{"closeButtonText":"Close","actionButtonText":"OK","headerText":"Proceed?","bodyText":"Perform this action?"}

代码：

app.service('modalDialogSvc', ['$modal',
    function ($modal) {

        var modalDefaults = {
            backdrop: true,
            keyboard: true,
            modalFade: true,
            templateUrl: '/MobileCOP/tmpl/dfltmodal.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's .html file $scope custom properties to defaults defined in service */
            angular.extend(tempModalOptions, modalOptions, customModalOptions);

            console.log('tempModalDefaults'+JSON.stringify(tempModalDefaults));
            console.log('tempModalOptions'+JSON.stringify(tempModalOptions));
            if (!tempModalDefaults.controller) {
                tempModalDefaults.controller = function ($scope, $modalInstance) {
                    $scope.modalOptions = tempModalOptions;
                    $scope.modalOptions.ok = function (result) {
                        $modalInstance.close(result);
                    };
                    $scope.modalOptions.close = function (result) {
                        $modalInstance.dismiss('cancel');
                    };
                };
            }
            console.log('tempModalDefaults'+JSON.stringify(tempModalDefaults));
            console.log('tempModalOptions'+JSON.stringify(tempModalOptions));
            /* return the modal object */
            return $modal.open(tempModalDefaults).result;
        };

    }
]);

Answer 1

发现问题，我将ui.bootstrap.modal作为依赖项。应该是ui.bootstrap。

ui-bootstrap模态加载模板错误

1 个答案: