Angular-ui bootstrap modal without creating new controller
It was possible in older version of UI-Bootstrap 0.10.0 .Even latest version,it works for me
index.html
<!-- if you are using Bower --> <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script><script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script><!-- modal --><!-- look at 'type' and 'id' values --><script type="text/ng-template" id="myTestModal.tmpl.html"> <div class="modal-header"> <h3>Modal Header</h3> </div> <div class="modal-body"> <p>Modal Body</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" ng-click="close()" data-dismiss="modal">Close </button> <button type="button" class="btn btn-primary" ng-click="doSomething()">Do Something </button> </div> </script>
modalDemoController.js
$scope.openModal=function(){ $scope.modalInstance=$modal.open({ templateUrl: 'myTestModal.tmpl.html', scope:$scope });}$scope.close=function(){ $scope.modalInstance.dismiss();//$scope.modalInstance.close() also works I think};$scope.doSomething=function(){ //any actions to take place console.log("Do Something");}
I haven't found a clean solution yet, the best workaround I found, to avoid writing the same code twice was to extend the modal controller like this:
$.extend(this, $controller('NormalCtrl', {$scope: $scope}));
full controller:
.controller('ModalCtrl', ['$scope', '$controller', '$modalInstance', function ($scope, $controller, $modalInstance) { //with this line here: // Initialize the super class and extend it. $.extend(this, $controller('NormalCtrl', {$scope: $scope})); // Opens a search result $scope.openResult = function() { $modalInstance.close($scope.selectedRow); }; // Called when the cancel button is pressed $scope.back = function() { $modalInstance.dismiss('cancel'); };}]);
That way, I can re-use the same code, without having to rewrite it all over again and I can override the functions that I want to do smth different to the original controller.
Hope I helped some people out there,
Alex
Just write a function instead of creating new file:
$scope.yourModal= function (data) { var modalInstance = $modal.open({ template: '<div>Do you really want to hurt me? <div><button class="btn" ng-click="hurt(data)">Yes</button></div></div>', controller: function($scope, scope){ $scope = scope; }, resolve: { scope: function () { return $scope; } }, size: 'sm' }); } $scope.hurt = function(data){ console.log(data); }