CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Ambuj Jauhari
Ambuj Jauhari

Reputation: 1289

Modal Controller not invoked

I am learning angular js and i am trying to load a error modal, whenever any error occurs during rest call.

Below is my modal 

<div class="modal-header">
    <h1>This is the title</h1>
</div>'
<div class="modal-body">
    {{errormessage}}
</div>

Below is my parent controller under which i am defining the error condition

angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, dataShare, $uibModal) {
    $scope.myInterval = 5000;
    $scope.noWrapSlides = false;
    $scope.active = 0;
    var slides = $scope.slides = [];
    var currIndex = 0;

    $scope.sendEnvName = function(data) {
        dataShare.sendEnvDetails(data);

        window.location.href = "query/queryboard.html";
    }

    $scope.addSlide = function (envName) {
        slides.push({
            text: envName,
            id: currIndex++
        });
    };

    $http.get("http://localhost:8080/getEnvList")
        .success(function (data) {
            for (var i in data) {
                $scope.addSlide(data[i].envName);
            }
        })
        .error(function (error) {
            $uibModal.open({
                templateUrl: 'error/ErrorModal.html',
                controller: ErrModalInstanceCtrl,
                size: 'sm',
                resolve:{
                    errormessage: function () {
                        console.log('lllllllllllll')
                        return "Some error occured";
                    }
                }
            });

            var ErrModalInstanceCtrl = function ($scope, $uibModalInstance, errormessage) {
                console.log(errormessage)
                $scope.items = items;

            };
        });

});

If i dont use resolve or controller, i.e. i hard code some string in the place of placeholder for error message, modal is loaded perfectly. I googled i found different answers regarding putting controller in quotes, but that doesnt helps either.

Please help me on this, not sure where i am going wrong.

Upvotes: 1

Views: 778

Answers (1)

Gabriel Hobold
Gabriel Hobold

Reputation: 693

You have to register the modal controller outside your current controller and then pass the name to the controller property in $uibModal.open method.

Like this:

// REGISTER THE MODAL CONTROLLER HERE
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', ModalInstanceCtrl);
ModalInstanceCtrl.$inject = ['$scope', '$uibModalInstance'];
function ModalInstanceCtrl($scope, $uibModalInstance) {

    $scope.item = "I'm your item";

    $scope.ok = function() {
        $uibModalInstance.close();
    };

    $scope.cancel = function() {
        $uibModalInstance.dismiss('cancel');
    };
}

Your controller:

    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',  // The modal controller name ('ModalInstanceCtrl')
        size: size,
        resolve: {
            errormessage: function () {
                console.log('lllllllllllll')
                return "Some error occured";
            }
        }
    });

Plunker here.

Upvotes: 1

Related Questions