AngularStrap关闭模态与控制器

Question

我正在使用AngularStrap和bootstrap.

我有一个使用它自己的控制器的模态对话框.如何使用本地控制器关闭模态？

我在一个按钮上实例化控制器,如下所示:

<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>

userLoginController有这个:

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

这显然只是一个演示,我希望它在成功登录时关闭,但这是我用来关闭它的代码.

我已经尝试以编程方式实例化模态(使用$ modal服务来创建模态)但我无法弄清楚如何通过该方法注入控制器.

如果我要使用bs-modal指令从模态中发出事件,我该如何引用模态来关闭它？

这是我的plnkr:http://plnkr.co/edit/m5gT1HiOl1X9poicWIEi?p=preview

Answer 1

在点击功能中做的时候

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

Answer 2

想出一个好方法:

我将ng-controller移动到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-controller.

Answer 3

我可能为时已晚,但只想分享我的答案.如果你只需要在表单成功后隐藏模态,那么将$ hide函数绑定到控制器varriable之一.

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