AngularJS $ modalInstance - Can I do this in one controller?

Question

I spent some time playing a game with an AngularJS Bootstrap popup, and for intent it works fine, but what I would like to do is link it, and it depends on a script with the same controller that I can’t work now, close button. If I create a NEW controller and add $ modalInstance, it works fine, and I can connect the close button without any problems, but I don’t want a second controller, it seems like it is more complicated: I need all my controller logic in the form of Controller really.

Why do I really want two controllers? Transferring the difference between the two controllers seems unnecessary to me, and the larger the project becomes more unmanageable, the more it will become. Am I trying to oversimplify this unnecessarily? :)

script:

(function(){ var app = angular.module('ngModalDemo', ['ui.bootstrap']) .controller('formController', function($scope, $modal){ $scope.openModal = function () { var modalInstance = $modal.open({ templateUrl: 'SomeModal.html', controller: 'formController' }); }; $scope.closeModal = function () { // Code needed here :) }; }) })(); 

HTML body (sorry HTML in the script for DEMO purposes):

  <div ng-controller="formController"> <button class="btn btn-default" ng-click="openModal()">Let do some stuff!</button> <script type="text/ng-template" id="SomeModal.html"> <div class="modal-header">Do some stuff in this modal y'all.</div> <div class="modal-footer"> <button class="btn btn-info" ng-click="closeModal()">Close</button> </div> </script> </div> 

Answer based on Caspar input :)

  (function(){ var app = angular.module('ngModalDemo', ['ui.bootstrap']) .controller('formController', function($scope, $modal, $log){ $scope.openModal = function () { var modalInstance = $modal.open({ templateUrl: 'SomeModal.html', controller: [ '$scope', '$modalInstance', function($scope, $modalInstance){ $scope.closeModal = function () { $modalInstance.close(); }; } ] }); }; }) })(); 

Answer 1

I struggled with the same problem, and the best I came up with is to use an anonymous function as a modal controller. Thus, all the logic is in one controller, and you do not need to create a separate controller for each modal window.

It will look like this:

 (function(){ var app = angular.module('ngModalDemo', ['ui.bootstrap']) .controller('formController', function($scope, $modal){ $scope.openModal = function () { var modalInstance = $modal.open({ templateUrl: 'SomeModal.html', controller: [ '$scope', '$modalInstance', 'data', function($scope, $modalInstance, data) { $scope.data = data; $scope.ok = function() { $modalInstance.close(); }; $scope.closeModal = function() { $modalInstance.dismiss(); }; } ] }); }; }) })(); 

PS. Did not check the code above, just combine it with the provided code and fragments from one of my projects.

Answer 2

You can also try this.

  var modalInstance = $modal.open({ templateUrl : 'someTemplate.html', scope : $scope, size : 'md' });