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

Answer 4

我发现上述所有答案对于您的用例来说太复杂了（当我遇到这个问题时我的答案）。

您需要做的就是链接ng-click以使用内置的$hide()角度绑带捆绑功能。

所以你的ng-click看起来像是：ng-click="authenticate();$hide()"

Answer 5

如果要将数据提交给控制器，则使用Angular和bootstrap然后将模态关闭只需将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();
    }
});

AngularStrap关闭模态与控制器

6 个答案: