問題

我使用（非常）新AngularJS Material Design dependency設計科爾多瓦混合使用的應用程序的輸入。在AngularJS材料底部表

我在通過$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點擊= 「$ event.preventDefault（）」`
添加-webkit-transform: translate3d(0, 80px, 0) !important;規則的CSS ，因爲這是拖動時正在改變的屬性的默認狀態。
將angular.element('md-bottom-sheet').on('click', function() { return false; });添加到ng-init塊。
在dragstart事件中執行與上述操作相同的操作（使用jQuery嘗試執行此操作）。

問題

我怎樣才能在底紙的材料設計中使用的輸入，因爲我已經試過所有的解決方法，我知道得到這個工作對於觸摸？

_注意事項

_{1.我很樂意爲此提供一個活生生的例子，但我找不到angular/material}

CDN來源

_{2。這只是發生在移動設備上，它是否會發生移動網站上的，因爲我已經只在科爾多瓦混合應用測試它不知道}

_{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()

是否有不需要我到餐桌這對於這樣一個小變化的解決方案嗎？

來源

2014-12-06 Josh Burgess

你靠近解決方案。您必須使用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'

這樣你就不必叉材料回購。

來源

2015-01-21 15:13:48 FUT

對於未來的讀者來說，該指令確實有效，但不管它是「preventDefault」還是「stopPropagation」。 – 2015-02-26 19:56:49

所以我遇到了完全相同的問題。上面的代碼適用於0.6.1之前的版本 - 雖然之後不能很好地工作。

我已經但是發現移動該e.preventDefault()（減去if()邏輯）下降到onTouchMove(e)功能，似乎解決所有滾動毛刺（ATLEAST，我可以看到） - 並仍然允許投入正常運行。

同意，如果納米材料的人可以將這樣的東西加入到回購庫中以使$ mdBottomSheet實現更加靈活，那將是非常好的。

來源

2014-12-18 00:27:57 glo

很高興知道。對於它的價值，開發Angular Material的人基本上將這個問題歸咎於底層紙張，因爲根據規格，底層紙張不應該有輸入。 – 2014-12-18 15:35:31

在AngularJS材料底部表

問題

事情我已經試過

問題

更新

回答

相關問題