The modal in Angular does not work. Raw rejection {}

Question

I want to create a modal (dialogue). I followed the official documentation examples for the bootstrap, but I'm stuck. When I try to create modal, I get an error

angular.min.js: 122 Perhaps an unhandled rejection: {}

mainController:

angular .module('app') .controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) { $scope.openTestLineDetails = function(id) { var modalInstance = $uibModal.open({ size: 'lg', controller: 'testlineDetailsController', templateUrl: 'app/client/layout/testlinedetails.tpl.html', resolve: { testLineId: function() { return id; } } }); }; }) 

and TestlineDetailsController:

 angular .module('app') .controller('testlineDetailsController', function($scope, $modalInstance, testLineId) { }); 

What is wrong with this code? I am using $ uibModal ($ modal service does not exist) in the main controller. When I replace $ modalInstance with $ uibModalInstance, I get an error too (the $ uibModalInstance service does not exist), so I need to use $ uibModal with $ modalInstance. Aspiration, but true.

Answer 1

you can write below code in app.config

 app.config(['$qProvider', function ($qProvider) { $qProvider.errorOnUnhandledRejections(false); }]); 

Answer 2

First of all, check that your modal script controller is added to the main HTML file, and if it is added (displayed) in the browser (in Chrome, open the web developer tools using the F12 button, then open the "Elements" tab) (This is in case, if you use some kind of tool for creating forests, for example generator-angular from the Yeoman team, do not forget to clear the cache to get the latest update from your code), because I had the same problem :( and I was constantly looking at what was wrong with my code, then I found out that I EP did not add the last script I made (Modal controller), so my code was similar to yours, but the example of your code:

 <!-- In your index.html file, check for this script being appended in your browser --> <script src="testlineDetailsController.js"></script> 

 //In your parent controller angular .module('app') .controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) { $scope.openTestLineDetails = function(id) { var modalInstance = $uibModal.open({ size: 'lg', controller: 'testlineDetailsController', templateUrl: 'app/client/layout/testlinedetails.tpl.html', resolve: { testLineId: function() { return id; } } }); }; }) 

Secondly, make sure that you use at least one method from the modal instance service in the modal controller: EDIT: (this is optional, you can hide the modal object using the background property of the modal option object)

 //In your modal controller angular.module('app'). controller('testlineDetailsController', function ($scope, $uibModalInstance, testLineId) { //In case you have the ok and cancel buttons in your modal template $scope.id = testLineId; $scope.ok = function () { $uibModalInstance.close(); }; $scope.cancel = function () { $uibModalInstance.dismiss('cancel'); }; }); 

After that, your application should work.

Now, to solve this problem, another alternative , you can directly write the controller function in the property of the modal options object:

 //In your parent controller angular .module('app') .controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) { $scope.openTestLineDetails = function(id) { var modalInstance = $uibModal.open({ size: 'lg', //write an anonymous function instead of naming the controller name. controller: function ($scope, $uibModalInstance, testLineId) { $scope.id = testLineId; $scope.ok = function () { $uibModalInstance.close(); }; $scope.cancel = function () { $uibModalInstance.dismiss('cancel'); }; }, templateUrl: 'app/client/layout/testlinedetails.tpl.html', resolve: { testLineId: function() { return id; } } }); }; }) 

This alternative should work in your application. Therefore, I hope this explanation helps you solve the problem that you have.