mdbottomsheet 禁用向下拖动关闭答案

【问题标题】：mdbottomsheet disable drag down to closemdbottomsheet 禁用向下拖动关闭
【发布时间】：2017-01-03 05:04:05
【问题描述】：

我想禁用 mdbottomsheet 的向下拖动以关闭手势。我找到了关于脚本的解决方法，但我不确定将代码放在哪里。感谢您的帮助。

【问题讨论】：

@Sajeetharan 我也有这个问题，这是代码：jsfiddle.net/plosives/pLL7e9kv/5，谢谢关注。
请添加您目前拥有的内容以及您放置此代码的位置。此外，您当前的文件结构将有助于确定放置此代码的最佳位置。
@alphapilgrim 我只想禁用向下拖动以关闭 mdbottomsheet，这对我来说不管放在哪里！如果angular-material 没有任何选项来禁用向下拖动，我该如何覆盖angular-material？非常感谢

标签： angularjs material-design angular-material

【解决方案1】：

正如你所说，angular-material 没有提供任何禁用它的选项，显然你必须对其源代码进行更改。

现在，您还没有提到是要在特定位置禁用它还是要在任何地方为 bottomSheets 启用向下拖动关闭。

1) 在后者的情况下，这将非常简单，因为您唯一需要做的就是删除拖动事件的事件侦听器。如果您使用 angular-material.js 文件，您可以执行以下操作：

找到函数BottomSheet(element, parent)。这个函数基本上注册了关闭工作表的拖动事件。我们需要让它不附加监听器。

将其简化为：

function BottomSheet(element, parent){
   return {
      element: element,
      cleanup: angular.noop
    };
}

清理函数基本上是在拖动事件时取消注册监听器。当底部表的范围被破坏时调用此函数。为了进行最小的更改，我们只是将清理功能减少到什么都不做。

2) 如果您希望能够在控制器中创建工作表时传递一个选项，您可以执行相同的操作，但有条件地基于您传递的选项。不会编写代码，因为我假设您知道 Angular 是如何工作的，但步骤如下：

=> 添加一个布尔变量以及其他选项（模板、范围等）。我们称之为 dragDownToClose。

=> 在 MdbottomSheet 的提供程序函数内的默认注入器函数中，为其分配一个默认值（true/false）。

=>在 onShow 函数内的 BottomSheet() 实例化期间将其与元素和父级一起传递。

=> 所以 BottomSheet() 现在将有三个参数 - dragDownToClose 是新参数。

当然，您可以通过多种方式实际实现这一点。不过，我希望你能明白。

【讨论】：

谢谢你，Devesh，你没事。但我不会修改angular-material.js 文件！我想在我的项目中添加一个js 文件并覆盖BottomSheet 函数以禁用向下拖动关闭。 @Devesh Sati

【解决方案2】：

首先，将$element 注入您的控制器。你知道 AngularJS $element 做什么，对吧？

然后我们都知道拖动事件注册在BottomSheet

parent.on('$md.dragstart', onDragStart)
    .on('$md.drag', onDrag)
    .on('$md.dragend', onDragEnd);

所以，简单的解决方案是：删除那些事件，覆盖那些事件...而不覆盖 function BottomSheet，对吧？

            $element
            .on('$md.dragstart', function (ev) {
                return false;
            })
            .on('$md.drag', function (ev) {
                return false;
            })
            .on('$md.dragend', function (ev) {
                return false;
            });

这里还是有问题！背景仍然可以拖动！所以，我们对背景做同样的事情

var parent = $element.parent();
var backdrop = parent.find('md-backdrop');
backdrop
                .on(blah blah blah

这些是code，以防您要求

【讨论】：

【解决方案3】：

你可以试试

$mdBottomSheet.show({
                      template: *yourTemplate*,
                      clickOutsideToClose:false
                   })

即使在外部拖动或点击，用户也不会关闭底部工作表。

【讨论】：