Geek Answers Handbook

Is there a way to use $ uibModal and $ uibModalInstance in the same controller to implement a modal popup using angular with typescript?

Since I'm new to angular with typescript, I am facing a problem when using angular modal popup. The problem is that I have one drop-down menu where I need to open a modal popup, and that the modal popup will have two Yes or No buttons. For this, I have one controller where I introduced the dependency.

export class QuestionnaireController { static ngControllerName = 'questionnaireController'; static inject = ["$uibModal"]; constructor(private $uibModal: ng.ui.bootstrap.IModalService) { } public openModalPopup() { let options: ng.ui.bootstrap.IModalSettings = { controller: QuestionnaireController, controllerAs:'ctrl', templateUrl: 'app/views/Dialogbox.html', }; this.$uibModal.open(options); } }

Most of my code is written in QuestionnaireController, and the popup opens with this controller, but I also want to close this popup, so I read the article that said I needed to create a new ModalController to close pop-up window.

 export class ModalController { static inject = ["$uibModalInstance"]; constructor(private $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance) { } public close() { this.$uibModalInstance.close(); } } Popup code is here... <div ng-app="" id="dvModal"> <div class="modal-header"> </div> <div class="modal-body"> <p> Evaluated result will be discarded if you continue. Are you sure you want to continue?</p> </div> <div class="modal-footer"> <input id="yesBtn" type="button" class="btn btn-default" ng-click="ctrl.Yes('true')" value="Yes" /> <input id="npBtn" type="button" class="btn btn-default" ng-click="ctrl.close()" value="No" /> </div>

and close this transferred controller: ModalController in the settings, which closes my pop-up window by clicking the "No" button. But now the problem arises here, as I again went to the QuestionnaireController to execute the Yes function, since the Yes functionality is written in the QuestionnaireController.

+5
source share
2 answers

Yes, you can!

$ uibModal is a super flexible tool.
I am not very familiar with Typescript, but here is my JS solution:

 angular .module('appName', ['ui.bootstrap']) .controller('SomePageController', ['$scope', '$uibModal', '$log', function ($scope, $uibModal, $log) {

First you want to change the way openModalPopup () is :

  // Instantiate the modal window var modalPopup = function () { return $scope.modalInstance = $uibModal.open({ templateUrl: 'blocks/modal/dialog.html', scope: $scope }); }; // Modal window popup trigger $scope.openModalPopup = function () { modalPopup().result .then(function (data) { $scope.handleSuccess(data); }) .then(null, function (reason) { $scope.handleDismiss(reason); }); }; // Close the modal if Yes button click $scope.yes = function () { $scope.modalInstance.close('Yes Button Clicked') }; // Dismiss the modal if No button click $scope.no = function () { $scope.modalInstance.dismiss('No Button Clicked') }; // Log Success message $scope.handleSuccess = function (data) { $log.info('Modal closed: ' + data); }; // Log Dismiss message $scope.handleDismiss = function (reason) { $log.info('Modal dismissed: ' + reason); } } ]);

Second - the modal window HTML template will look like this:

 <script type="text/ng-template" id="blocks/modal/dialog.html"> <div class="modal-header"> <h3 class="modal-title">I'm a modal!</h3> </div> <div class="modal-body"> Modal content </div> <div class="modal-footer"> <button class="btn btn-primary" type="button" ng-click="yes()">Yes</button> <button class="btn btn-warning" type="button" ng-click="no()">No</button> </div> </script>

The third is the fairly simple SomePage HTML (in your case, the Questionnaire ) Example :

 <div ng-controller="SomePageController"> <button type="button" class="btn btn-default" ng-click="openModalPopup()">Open modal</button> </div>

Together:

 angular .module('appName', ['ui.bootstrap']) .controller('SomePageController', ['$scope', '$uibModal', '$log', function($scope, $uibModal, $log) { $scope.modalPopup = function() { modal = $uibModal.open({ templateUrl: 'blocks/modal/dialog.html', scope: $scope }); $scope.modalInstance = modal; return modal.result }; $scope.modalPopupTrigger = function() { $scope.modalPopup() .then(function(data) { $scope.handleSuccess(data); },function(reason) { $scope.handleDismiss(reason); }); }; $scope.yes = function() { $scope.modalInstance.close('Yes Button Clicked') }; $scope.no = function() { $scope.modalInstance.dismiss('No Button Clicked') }; $scope.handleSuccess = function(data) { $log.info('Modal closed: ' + data); }; $scope.handleDismiss = function(reason) { $log.info('Modal dismissed: ' + reason); } } ]); 
 <!DOCTYPE html> <html> <head> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> </head> <body ng-app="appName"> <div ng-controller="SomePageController"> <script type="text/ng-template" id="blocks/modal/dialog.html"> <div class="modal-header"> <h3 class="modal-title">I'm a modal!</h3> </div> <div class="modal-body"> Modal content </div> <div class="modal-footer"> <button class="btn btn-primary" type="button" ng-click="yes()">Yes</button> <button class="btn btn-warning" type="button" ng-click="no()">No</button> </div> </script> <button type="button" class="btn btn-default" ng-click="modalPopupTrigger()">Open modal</button> </div> <script src="https://code.angularjs.org/1.5.7/angular.min.js"></script> <script src="https://code.angularjs.org/1.5.7/angular-animate.min.js"></script> <script src="https://raw.githubusercontent.com/angular-ui/bootstrap-bower/master/ui-bootstrap-tpls.min.js"></script> </body> </html>
+10
source

Well, if you are such a lazy guy like me, the following will also work :)

 var objects = [{ name: "obj1", value: 1 }, { name: "obj2", value: 2 }]; // Generating the modal html var html = "<div class='modal-header'><h4 class='modal-title'>Select Object</h4></div>"; html += "<div class='modal-body'>"; html += "<select class='form-control' ng-model='selection'>"; for (var i = 0; i < objects.length; i++) { var ob = objects[i]; html += "<option value='" + ob.value + "'>" + ob.name + "</option>"; } html += "</select>"; html += "</div>"; html += "<div class='modal-footer'>"; html += '<button type="button" ng-click="dismissModal()" class="btn btn-default" >Close</button>'; html += '<button type="button" ng-click="closeModal()" class="btn btn-primary">Select</button>'; html += "</div>"; // Showing the modal var objectSelectionModal = $uibModal.open({ template: html, controller: function($scope) { // The function that is called for modal closing (positive button) $scope.closeModal = function() { //Closing the model with result objectSelectionModal.close($scope.selection); }; //The function that is called for modal dismissal(negative button) $scope.dismissModal = function() { objectSelectionModal.dismiss(); }; } }); //Processing the Result objectSelectionModal.result.then(function(selected) { alert(selected); });
+2
source

More articles:


All Articles