CODEWITHSUNDEEP
angularjstwitter-bootstrapmodal-dialogangular-strap
Snowburnt
Snowburnt

Reputation: 6932

AngularStrap close modal with controller

I'm using AngularStrap with bootstrap.

I have a modal dialog that uses it's own controller. How can I close the modal using this local controller?

I instantiate the controller on a button like this:

<button type="button" 
  class="btn btn-success btn-lg" 
  bs-modal="modal" 
  data-template="user-login-modal.html"
  data-container="body"
  ng-controller="userLoginController"
  >Click here to log in</button>

and the userLoginController has this:

$scope.authenticate = function(){
    this.hide(); // this doesn't work
    }

This is obviously just a demo, I want it to close on successful login, but this is where the code I'd use to close it would go.

I've tried instantiating the modal programmatically (use the $modal service to create the modal) but I haven't been able to figure out how to inject the controller through that method.

If I were to do something like emit an event from the modal using the bs-modal directive, how can I reference the modal to close it?

here's my plnkr: http://plnkr.co/edit/m5gT1HiOl1X9poicWIEi?p=preview

Upvotes: 4

Views: 33385

Answers (6)

bbrown
bbrown

Reputation: 6360

Perhaps open it with the service on click and have it close itself on the $destroy event?

$scope.openModal = function()
{
    $scope.modal = $modal({
        template: "user-login-modal.html",
        container="body"
    });
}

$scope.$on("$destroy", function()
{
    if ($scope.modal)
    {
        $scope.modal.hide();
    }
});

Upvotes: 0

Ian Poston Framer
Ian Poston Framer

Reputation: 958

Using Angular and bootstrap if you want to submit data to controller then have the modal close just simply add onclick="$('.modal').modal('hide')" line to the submit button. This way it will hit the controller and close the modal. If you use data-dismiss="modal" in the button submit never hits the controller. At least for me it didn't. And this is not to say my method is a best practice but a quick one liner to get data to at least submit and close out the modal. 

<div class="modal fade" id="myModal" ng-controller="SubmitCtrl">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form ng-submit="submit()">
          <input type="text" ng-model="name" />
          <button type="submit" onclick="$('.modal').modal('hide')">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Sean Perkins
Sean Perkins

Reputation: 541

I found all of the above answers way too complicated for your use case (and mine when I ran into this problem).

All you need to do, is chain the ng-click to use the built in $hide() function that angular strap bundles.

So your ng-click would look like: ng-click="authenticate();$hide()"

Upvotes: 0

Hrafnkell Orri Sigur&#240;sson
Hrafnkell Orri Sigur&#240;sson

Reputation: 142

When in the on-click function do

$scope.myClickEvent = function () {
   this.$hide();
}

Upvotes: 8

MikeNQ
MikeNQ

Reputation: 653

I am probably too late, but just wish to share my answer. If all you need is hiding the modal after form success, then bind that $hide function to one of controller varriable.

<div class="modal" data-ng-controller="Controller" data-ng-init="bindHideModalFunction($hide)">

In the controller:

// Bind the hiding modal function to controller and call it when form is success
$scope.hideModal;
$scope.bindHideModalFunction =function(hideModalFunction){
    $scope.hideModal = hideModalFunction;
}

Upvotes: 6

Snowburnt
Snowburnt

Reputation: 6932

Figured out a good method:

I moved the ng-controller to the TEMPLATE and instantiate the modal using the provided modal service. I then use a rootscope broad cast to let everyone know that someone successfully logged in.

new controller code:

var loginModal = $modal({template:'/template.html', show:false});

$scope.showLogin = function(){
    loginModal.$promise.then(loginModal.show);
}

$scope.$on("login", function(){
    loginModal.$promise.then(loginModal.hide);
});

the button just looks like this now:

<button type="button" 
  class="btn btn-success btn-lg" 
  ng-click="showLogin()"
  >Click here to log in</button>

and my template has the old ng-controller in the first tag.

Upvotes: 7

Related Questions