4

我将 AngularStrap 与引导程序一起使用。

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

我在这样的按钮上实例化控制器：

<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

4

6 回答 6

8

当在点击功能做

$scope.myClickEvent = function () {
   this.$hide();
}
于 2014-10-13T12:36:20.330 回答
7

想出了一个好方法：

我将 ng-controller 移动到 TEMPLATE 并使用提供的模态服务实例化模态。然后我使用 rootscope 广播让每个人都知道有人成功登录。

新控制器代码：

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。

于 2014-02-18T17:56:48.123 回答
6

我可能为时已晚，但只想分享我的答案。如果您只需要在表单成功后隐藏模式，则将该 $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;
}
于 2014-09-14T18:18:02.347 回答
0

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

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

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

于 2016-02-04T15:39:12.547 回答
0

如果您想向控制器提交数据，请使用 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>
于 2016-02-26T18:38:57.677 回答
0

也许通过点击服务打开它并让它在$destroy事件中自行关闭？

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

$scope.$on("$destroy", function()
{
    if ($scope.modal)
    {
        $scope.modal.hide();
    }
});
于 2016-12-09T18:24:03.367 回答