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

Question

问题

我正在使用(非常)新的AngularJS Material Design依赖项设计Cordova混合应用程序.

我在一个名为via $mdBottomSheetservice 的底页中有一个登录表单.示例如下:

$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. 将-webkit-transform: translate3d(0, 80px, 0) !important;规则添加到CSS,因为这是在拖动时更改的属性的默认状态.
3. 添加angular.element('md-bottom-sheet').on('click', function() { return false; });到ng-init块.
4. 在事件上执行与上面相同的操作(使用jQuery尝试对此进行操作)dragstart.

 

---

这个问题

我如何使用材料设计在底页中使用输入,因为我已经尝试了我知道的每个解决方法以使其适用于触摸？

 

---

_注意事项

_{1.我想为此提供一个实例,但我找不到角度/材料的CDN来源}

_{2.这只发生在移动设备上,不知道它是否会在移动网站上发生,因为我只在Cordova混合应用程序中进行了测试}

_{3.我没有通过搜索找到的这个例子,所以我甚至无法指出你可以模拟问题的资源.}

_{基本上,这很难再现.}

---

更新

我发现了一个可能的解决办法:

function BottomSheet(element)提供程序的"类"中的以下块具有以下内容:

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

将其更改e.preventDefault()为以下内容确实允许正常的输入行为,但需要我分叉他们的repo.

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

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

Answer 1

你已经接近解决方案了。你必须使用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'

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