问题

Question

问题

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

我在一个名为via $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>

一切都运行并且显示得很好。

HOWEVER！当我点击输入时，焦点永远不会给输入，而是来回拖动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.我没有通过搜索找到的这个例子，所以我甚至无法指出你可以模拟问题的资源。

<子> 基本上，这很难再现。

更新

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

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

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

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

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

是否有一个解决方案不需要我为这么小的改变分叉？

Answer 1

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

但我发现将e.preventDefault()（减去if()逻辑）向下移动到onTouchMove(e)函数，似乎可以解决所有滚动故障（至少我能看到） - 以及仍允许输入正常运行。

同意，如果ng-material人员可以将这样的东西合并到repo中以使$ mdBottomSheet实现更灵活，那将是超级的。

Answer 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'

这样你就不必分叉材料仓库了。

使用AngularJS Material底部表格中的输入

问题

我尝试过的事情

问题

更新

2 个答案: