AngularStrap close to module with controller

Question

I am using AngularStrap with bootstrap.

I have a modal dialog box that uses my own controller. How can I close modal with this local controller?

I create the controller instance with the button:

<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 userLoginController has the following:

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

This is obviously just a demo version, I want it to close when I log in successfully, but this is where the code I would use to close will be used.

I tried copying modally programmatically (using a modal service to create a modal), but I could not figure out how to enter a controller through this method.

If I were to do something like emit events from a modal using the bs-modal directive, how can I refer to the modal to close it?

plnkr: http://plnkr.co/edit/m5gT1HiOl1X9poicWIEi?p=preview

Answer 1

:

ng- TEMPLATE , . , , - .

:

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

:

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

ng- .

Answer 2

on-click

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

Answer 3

, , . , , , $hide .

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

:

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

Answer 4

( , ).

, , - ng-click, $hide(), angular.

, ng-click : ng-click="authenticate();$hide()"

Answer 5

Angular , , , onclick="$('.modal').modal('hide')" . , . data-dismiss="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>

Answer 6

, $destroy?

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

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