自定义模态的关闭按钮

Question

我在控制器中使用了modal angular strap，如下所示：

$scope.modal = $modal({
   scope: $scope, 
   title: 'My Title', 
   content: text, 
   html: true, 
   contentTemplate: 'views/partials/myTemplate.html', 
   show: true, 
   keyboard: false, 
   backdrop: "static"
});

我需要在下图中自定义模态顶部的关闭按钮的操作： 。

如何覆盖顶部按钮的关闭操作？

Answer 1

创建自己的模板，并忽略按钮上的ng-click="$hide()"。

请参阅template选项下文档中的链接，其使用方式与您使用contentTemplate完全相同

Answer 2

您可以为模态设置模板，也可以为模态提供ID并使用CSS。

<!-- You can use a custom html template with the `data-template` attr -->
<button ... data-template="modal/docs/modal.demo.tpl.html" ...

HTML

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" ng-show="title">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="modal-title" ng-bind-html="title"></h4>
      </div>
      <div class="modal-body" ng-show="content">
         ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
        <button type="button" class="btn btn-primary" ng-click="$hide()">Save changes</button>
      </div>
    </div>
  </div>
</div>

您可以根据自己的喜好自定义按钮。另外，在不添加新模板的情况下删除它的好方法是向模态添加id并使用css隐藏关闭按钮。

的Javascript

$scope.modal = $modal({
   ...
   id: 'noCloseButton'
});

CSS

#noCloseButton > .close { display: none; }