javascript - 在 AngularJS Material 底页中使用输入

Question

问题

我正在使用(非常)新的 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 元素被拖回并向前。单击按钮(未禁用时)会正常触发，但永远不会识别单击输入以使其获得焦点。

---

我尝试过的事情

1. 添加 ng-click="return false", 'ng-click="$event.preventDefault()"`
2. 向 CSS 添加 -webkit-transform: translate3d(0, 80px, 0) !important; 规则，因为这是在拖动时更改的属性的默认状态。<
3. 添加 angular.element('md-bottom-sheet').on('click', function() { return false; }); 到 ng-init block 。
4. 在 dragstart 事件上执行与上述相同的操作(使用 jQuery 尝试笨手笨脚)。

---

问题

如果我已经尝试了所有我知道的解决方法来使它适用于触摸，我如何在底部工作表中使用 Material Design 中的输入？

---

_注意事项

<子> 1. 我很乐意为此提供一个实例，但我找不到 angular/material 的 CDN 源

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

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

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

---

更新

我确定的一个可能的修复方法:

提供程序的 function BottomSheet(element)“类”中的以下 block 具有以下内容:

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

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

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

是否有解决方案不需要我为如此小的更改进行 fork ？

Answer 1

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

指令(.coffee)

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

View (.slim)

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

这样你就不必 fork Material 仓库了。