在 AngularJS Material 底页中使用输入

Posted 2023-03-06

【中文标题】在 AngularJS Material 底页中使用输入

【英文标题】：Use inputs in AngularJS Material bottom-sheet

【发布时间】：2015-02-04 08:29:50

【问题描述】：

问题

我正在使用（非常）新的 AngularJS Material Design dependency 设计一个 Cordova 混合应用程序。

我在底部表单中有一个登录表单，通过$mdBottomSheet 服务调用。示例如下：

$scope.showLogin = function ($event) 
  $mdBottomSheet.show(
    templateUrl: 'views/login/login.html',
    controller: 'loginCtrl'
  )
;

views/login/login.html的内容是：

<md-bottom-sheet ng-controller="loginCtrl" layout="column">
  <form name="signInForm" ng-submit="submitPassword()">
    <md-list>
      <md-item>
        <md-progress-circular md-mode="indeterminate" ng-show="loading"></md-progress-circular>
      </md-item>
      <md-item>
        <md-text-float label="Email address" ng-model="username" required>
        </md-text-float>
      </md-item>
      <md-item>
        <md-text-float type="password" label="Password" ng-model="password" required>
        </md-text-float>
      </md-item>
      <md-item>
        <md-button class="md-primary md-raised submit" type="submit">Sign in</md-button>
      </md-item>
    </md-list>
  </form>
</md-bottom-sheet>

一切运行和显示都很好。

但是！当我点击输入时，焦点永远不会放在输入上，而是来回拖动 md-bottom-sheet 元素。单击按钮（未禁用时）会很好地触发，但是永远无法识别单击输入以使其获得焦点。

 

---

我尝试过的事情

添加ng-click="return false"，'ng-click="$event.preventDefault()"` 在 CSS 中添加 -webkit-transform: translate3d(0, 80px, 0) !important; 规则，因为这是拖动时更改的属性的默认状态。 将angular.element('md-bottom-sheet').on('click', function() return false; ); 添加到ng-init 块中。 在 dragstart 事件上执行与上述相同的操作（使用 jQuery 尝试对此进行处理）。

 

---

问题

鉴于我已经尝试了所有我知道的解决方法以使其适用于触摸，我如何在具有材料设计的底部工作表中使用输入？

 

---

_注意事项

1. 我很想为此提供一个活生生的例子，但我找不到angular/material的CDN来源

2. 这只发生在移动设备上，不知道是否会发生在移动网站上，因为我只在 Cordova 混合应用程序中测试过

3. 我没有通过搜索找到这方面的示例，所以我什至无法为您指出可能模拟该问题的资源。

4. 基本上，这将很难重现。

---

更新

我发现了一个可能的解决方法：

提供者的function BottomSheet(element)“类”中的以下块具有以下内容：

function onTouchStart(e) 
  e.preventDefault();
  /* do the rest of the code */

将e.preventDefault() 更改为以下确实允许正常的输入行为，但需要我分叉他们的回购。

if (e.target.tagName.toLowerCase() !== 'input')
  e.preventDefault()

有没有一种解决方案不需要我为这么小的更改分叉？

【参考方案1】：

所以我遇到了完全相同的问题。上面的代码适用于 0.6.1 之前的版本 - 尽管之后效果不佳。

然而，我发现将 e.preventDefault()（减去 if() 逻辑）移至 onTouchMove(e) 函数，似乎可以修复所有滚动故障（至少我可以看到） - 并且仍然允许输入正常运行.

同意，如果 ng-material 人员可以将这样的内容合并到 repo 中以使 $mdBottomSheet 实现更加灵活，那就太好了。

【讨论】：

很高兴知道。对于它的价值，开发 Angular Material 的人基本上将其击落，因为底片不应该根据规范输入。

【参考方案2】：

您已接近解决方案。您必须使用stopPropagation() 而不是preventDefault()。这是简单的方法：

指令 (.coffee)

angular.module('Expedite').directive 'stopEvent', ->
  restrict: 'A'
  link: (scope, element, attr) ->
    element.bind attr.stopEvent, (e) ->
      e.stopPropagation()

查看 (.slim)

input ng-model="user.email" stop-event='touchstart'

这样您就不必分叉材料回购。

【讨论】：

对于未来的读者来说，该指令确实有效，但它是preventDefault 还是stopPropagation 都没有关系。