2

我有一个单独的组件 js

上传图片.js

'use strict'

imageListApp.controller('uploadImageController', function ($scope, Upload) {
    var $ctrl = this;

    $ctrl.$onInit = function () {

    }
    $ctrl.ok = function (file) {
        $scope.f = file;

        if (file) {
            file.upload = Upload.upload({
                url: '/api/images/upload',
                data: { title: $scope.picTitle, files: file }
            });

            file.upload.then(function (response) {

                $ctrl.close({ $value: response.data })


            }, function (response) {
                if (response.status > 0)
                    $scope.errorMsg = response.status + ': ' + response.data;
            }, function (evt) {
                file.progress = Math.min(100, parseInt(100.0 *
                    evt.loaded / evt.total));
            });
        }
    }

    $ctrl.cancel = function () {
        $ctrl.dismiss({ $value: 'cancel' });
    }

})

imageListApp.component('uploadImage', {
    templateUrl: 'js/components/uploadImage/uploadImage.html',
    bindings: {
        resolve: '<',
        close: '&',
        dismiss: '&'
    },
    controller: 'uploadImageController'
})

在其他控制器 js 中，我使用 $uib.open 来打开带有此组件的模式

$scope.openUploadModal = function () {
            var uploadModalInstance = $uibModal.open({
                component:'uploadImage',
                resolve: {
                    title: function () {
                        return $scope.title;
                    }
                }
            });

            uploadModalInstance.result.then(function () {
                console.log("upload success");
            },
            function () {
                console.log("upload cancel");
            })


        }

我确保所有 javascript 都正确包含在 index.html 中

当我调用 open modal 函数时，出现以下错误：

angular.js:14525 Error: One of template or templateUrl options is required.
    at Object.$modal.open (ui-bootstrap-tpls.js:3742)
    at Scope.$scope.openUploadModal (imageListController.js:58)
    at fn (eval at compile (angular.js:15358), <anonymous>:4:165)
    at callback (angular.js:26994)
    at Scope.$eval (angular.js:18161)
    at Scope.$apply (angular.js:18261)
    at HTMLInputElement.<anonymous> (angular.js:26999)
    at HTMLInputElement.dispatch (jquery.js:5206)
    at HTMLInputElement.elemData.handle (jquery.js:5014)

错误的含义是什么以及导致此错误的问题是什么？

4

2 回答 2

1

模板（类型：字符串）- 表示模态内容的内联模板。

templateUrl (Type: string) - 表示模态内容的模板的路径。您需要模板或 templateUrl。

为您的模式选项（或 templateUrl）添加模板

于 2017-07-05T06:51:01.770 回答
1

你需要版本 2.5.6

npm install angular-ui-bootstrap
于 2018-05-02T07:38:46.490 回答