{"id":8372,"date":"2023-08-14T06:11:00","date_gmt":"2023-08-14T06:11:00","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=8372"},"modified":"2023-08-14T06:11:00","modified_gmt":"2023-08-14T06:11:00","slug":"angular-ui-modal-and-modalinstance-within-one-controller","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/angular\/angular-ui-modal-and-modalinstance-within-one-controller","title":{"rendered":"Angularjs &#8211; Angular UI $modal and $modalInstance within One Controller"},"content":{"rendered":"<p>AngularUI&#8217;s modal consist of 2 controllers the default controller $modal is a service to quickly create AngularJS-powered modal windows and the other one is to handle $modelInstances.<\/p>\n<p>Here&#8217;s a simple example to illustrate $modal and $modalInstance within one controller in AngularJS:<\/p>\n<p>1. You don&#8217;t have to create a new controller for created modal just do this:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">angular.module('app', ['ngAnimate', 'ui.bootstrap']);\r\nangular.module('app').controller('ModelCtrl', function ($scope, $modal) {\r\n\r\n  $scope.items = ['item1', 'item2', 'item3'];\r\n  \/\/I have a few more scopes to be used in the model\r\n\r\n  $scope.open = function (size) {\r\n\r\n    var modalInstance = $modal.open({\r\n      animation: true,\r\n      templateUrl: 'myModalContent.html',\r\n      size: 'lg',\r\n      scope: $scope\r\n    });\r\n\r\n    modalInstance.result.then(function () {\r\n\r\n    }, function () {\r\n\r\n    });\r\n  };\r\n\r\n  $scope.ok = function () {\r\n    modalInstance.close($scope.selected.item);\r\n  };\r\n\r\n  $scope.cancel = function () {\r\n    modalInstance.dismiss('cancel');\r\n  };\r\n});\r\n<\/pre>\n<p>2. In that way all the logic is in the same controller and you don&#8217;t have to create a separate controller for each modal window.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">(function(){\r\n    var app = angular.module('ngModalDemo', ['ui.bootstrap']) \r\n    .controller('formController', function($scope, $modal){\r\n        $scope.openModal = function () {                        \r\n            var modalInstance = $modal.open({\r\n                templateUrl: 'SomeModal.html',\r\n                controller: [\r\n                    '$scope', '$modalInstance', 'data', function($scope, $modalInstance, data) {\r\n                        $scope.data = data;\r\n                        $scope.ok = function() {\r\n                            $modalInstance.close();\r\n                        };\r\n                        $scope.closeModal = function() {\r\n                            $modalInstance.dismiss();\r\n                        };\r\n                    }\r\n                ]\r\n            });\r\n        };\r\n    })\r\n})();\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>AngularUI&#8217;s modal consist of 2 controllers the default controller $modal is a service to quickly create AngularJS-powered modal windows and the other one is to handle $modelInstances. Here&#8217;s a simple example to illustrate $modal and $modalInstance within one controller in AngularJS: 1. You don&#8217;t have to create a new controller for created modal just do [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8492,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-8372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8372"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=8372"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8372\/revisions"}],"predecessor-version":[{"id":8373,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8372\/revisions\/8373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/8492"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=8372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=8372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=8372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}