Angular bootstrap ui modal with same controller instead of new controller

Question

I am using angular bootstrap ui modal box it says to give a new $modalInstance for new controller.I want to use the same controller where i have initialized the modal box.I searched but no success.I found this links but no success -

How to use the same controller for modal and non-modal form in Angular UI Bootstrap? Angular-ui bootstrap modal without creating new controller

app.controller('UserCtrl',['$scope','$filter','ngTableParams','$modal',function($scope, $filter, ngTableParams,$modal) {

  var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl', //Instead of this i want to use the same controller 'UserCtrl'
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});
 };
};

  } ]);

So that i can call the save function on this same controller which is called on save click of modal box

Why do you want to use the same controller? The answer to that could help derive a solution. For example, do you already have variables in scope that you'd like to access? If so, you can use scope inheritance to access those variables. — sma
– sma, Commented Sep 16, 2014 at 15:25
I want to call a function savedata() which is on the click of save button of modalbox..but without using modal instance function doesn't get fire. — Namdeo Karande
– Namdeo Karande, Commented Sep 16, 2014 at 15:29
@user1844266 look at the example in docs and how close() in modal controler passes promise back to result in original controller — charlietfl
– charlietfl, Commented Sep 16, 2014 at 15:35

Community · Accepted Answer · 2020-06-20 09:12:55Z

It was possible in older version of UI-Bootstrap 0.10.0 Download Library.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>

<!-- button click opens modal-->
<button ng-click="openModal()">Button test</button>

<!-- 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");
}

tafchad · Accepted Answer · 2017-08-02 10:54:00Z

0

I had a similar issue, but I managed to fix it by removing the controller inside of the $uibModal.open({])

answered Aug 2, 2017 at 10:54

tafchad

3,8311 gold badge18 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular bootstrap ui modal with same controller instead of new controller

2 Answers 2

index.html

modalDemoController.js

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

index.html

modalDemoController.js

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related