Utilizzare ingressi in AngularJS materiale di fondo fogli

Question

Il problema

Sto progettando un ibrido app Cordova utilizzando il (molto) nuovo AngularJS Material Design dependency.

Ho un modulo di accesso in un foglio di fondo chiamato tramite il servizio $mdBottomSheet. Esempio di seguito:

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

Il contenuto di views/login/login.html sono: piste

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

Tutto e display più che bene.

TUTTAVIA! quando clicco sull'ingresso, il focus non viene mai assegnato all'input, e invece l'elemento md-bottom-sheet viene trascinato avanti e indietro. Facendo clic sul pulsante (quando non disabilitato) si attiva bene, ma il clic sull'input per assegnargli il focus non viene mai riconosciuto.

 

---

Le cose che ho provato

1. Aggiunta ng-click="return false", 'ng-click = "$ event.preventDefault()" `
2. Aggiunta di una regola -webkit-transform: translate3d(0, 80px, 0) !important; al CSS , poiché questo è lo stato predefinito della proprietà che viene modificato durante il trascinamento.
3. Aggiunta angular.element('md-bottom-sheet').on('click', function() { return false; }); a un blocco ng-init.
4. Come sopra (utilizzando jQuery per provare a eseguire questa operazione) sull'evento dragstart.

 

---

La domanda

Come posso utilizzare un ingresso in un lenzuolo di sotto con un design materiale, dato che ho provato ogni soluzione che conosco per ottenere questo a lavorare per toccare?

 

---

_Avvertenze

_{1. Mi piacerebbe offrire un esempio vivo per questo, ma non riesco a trovare una fonte CDN per angular/material}

_{2. Questo accade solo su un dispositivo mobile, nessuna idea se accadrà su un sito web mobile, come ho provato solo in un ibrido app Cordova}

_{3. Non ci sono esempi di questo che ho trovato via ricerca, quindi non posso nemmeno indicarti una risorsa che potrebbe emulare il problema.}

_{4. Fondamentalmente, questo sarà molto difficile da riprodurre.}

---

Aggiornamento

Una possibile soluzione Ho identificato:

Il seguente blocco nella "classe" function BottomSheet(element) per il provider ha la seguente:

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

Modifica che non consente il normale comportamento di input, ma richiede es che bendo il loro repo.

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

C'è una soluzione che non mi richiede di sborsare questo per un cambiamento così piccolo?

Answer 1

Eri vicino alla soluzione. Dovevi usare stopPropagation() invece di preventDefault(). Qui è l'approccio semplice:

direttiva (.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' 

In questo modo non sarà necessario sborsare materiale repo.

Answer 2

Quindi sto incontrando esattamente lo stesso problema. Il codice sopra funziona per il pre 0.6.1 - sebbene in seguito non funzioni molto bene.

ho però scoperto che in movimento che e.preventDefault() (meno la logica if()) verso il basso per la funzione onTouchMove(e), sembra risolvere tutti i difetti di scorrimento (almeno che posso vedere) - e permette ancora ingressi a funzionare normalmente.

D'accordo, sarebbe fantastico se i ragazzi di ng-material potessero incorporare qualcosa di simile nel repository per rendere l'implementazione $ mdBottomSheet più flessibile.