Ambuj Jauhari Ambuj Jauhari - 5 months ago 35
Javascript Question

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.

Answer

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.

Comments