2

I have a separate component js

uploadImage.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'
})

And in other controller js, I use $uib.open to open modal with this component

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


        }

I ensure all javascript are include properly in index.html

When I invoke the open modal function, I get the errors:

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)

What means of the error and what problem to cause this error?

interman
  • 141
  • 1
  • 2
  • 9

2 Answers2

1

template (Type: string) - Inline template representing the modal's content.

templateUrl (Type: string) - A path to a template representing modal's content. You need either a template or templateUrl.

Add a template for your modal options (or templateUrl)

Fetrarij
  • 7,176
  • 3
  • 27
  • 35
  • 2
    I am using component and passing a component (uploadImage) which already define the templateUrl. The doc: 'component (Type: string, Example: myComponent) - A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have restrict: 'E' and a template or templateUrl set.' – interman Jul 05 '17 at 13:24
  • share your component code, for sure there are smething missing – Fetrarij Jul 05 '17 at 13:28
  • Component code is in the bottom of uploadImage.js. (First JS file attachment) – interman Jul 06 '17 at 12:27
  • Which version do you use? how do you include js file? because I tried with your code and everything works https://plnkr.co/edit/?p=prOwH1VPmJXidGCvOdiFkSeview – Fetrarij Jul 06 '17 at 15:09
  • What is the plunker link doing? It is a simple 'hello plunker' webpage. I will show the other js for include and version later. Thx – interman Jul 07 '17 at 12:37
  • Sorry for the link, https://plnkr.co/edit/OwH1VPmJXidGCvOdiFkS?p=preview , I put your code you provided on plnkr and it works without issue – Fetrarij Jul 07 '17 at 12:59
1

you need Versions 2.5.6

npm install angular-ui-bootstrap
白小四
  • 11
  • 1