Utilizzo delle visualizzazioni del rasoio con convalida jQuery con angularJS

Question

Uso AngularJS nella mia applicazione MVC e sto cercando di utilizzare il meglio di entrambi i mondi. Mi piace molto come in MVC puoi impostare la logica di convalida nei tuoi viewmodels e generare la convalida lato client con la convalida jQuery nelle tue visualizzazioni del rasoio con poco sforzo. Io uso AngularJS per ottenere il comportamento SPA con il routing, ecc, ma quando creo una vista rasoio che uso per iniettare in una pagina con: <div data-ng-view="data-ng-view"></div>

poi la convalida jQuery smette di funzionare, anche se i file di script è riferimenti su la pagina in cui viene iniettata la vista. Vedi sotto per mio punto di vista rasoio:

@model BandViewModel 
<div data-ng-controller="App.BandCreateCtrl"> 
    <form name="startBandForm"> 
     @Html.ValidationSummary(true) 
     <br /> 
     @Html.LabelFor(m => m.Name) 
     @Html.TextBoxFor(m => m.Name, new { data_ng_model = "band.Name" }) 
     @Html.ValidationMessageFor(m => m.Name) 
     <br/> 
     <input data-ng-disabled="startBandForm.$invalid" type="submit" data-ng-click="createBand(band)" value="Create"/> 
    </form> 
</div> 

Answer 1

Prima di tutto, IMO utilizzando rasoio per rendere i modelli è pieno di pericoli, nel migliore dei casi. In genere si desidera utilizzare l'HTML statico per i modelli di pagina e direttiva e quindi recuperare e inviare dati come AJAX all'API. L'API Web ASP.NET è davvero brava in questo, in realtà. Se il modello sottostante ha una convalida, le chiamate API Web errate genereranno un'eccezione, che è possibile rilevare nel gestore di risorse $ http o $ e mostrarle all'utente. Mescolare messaggi di moduli HTTP standard con AngularJS sarà ... difficile.

Per ottenere ciò che si desidera, penso che qualcuno (non io) dovrebbe scrivere l'equivalente di AngularJS a jQuery Unobtrusive Validation library, che utilizza lo stesso jQuery Validate plugin. Non banale Personalmente non vedo la validazione Angolare drop-in che si verifica presto, soprattutto perché ha più a che fare con il markup e meno con un oggetto di configurazione JS.

Probabilmente è possibile inizializzare nuovamente la convalida al termine del caricamento della vista utilizzando the $viewContentLoaded event. Ma per favore non farlo.

Answer 2

Mi duole che ovunque Ho cercato di ottenere le stesse risposte: "HTML dovrebbe essere solo un modello". Forse, ma solo che non sono pronti a delegare tutto a JavaScript

Invece di utilizzare l'oggetto anonimo per passare gli attributi HTML, provare a utilizzare il dizionario

@Html.TextBoxFor(m => m.Name, new Dictionary<string, object>(){{ "data_ng_model", "band.Name" }}) 

assicurarsi che sia

Dictionary<string, object> 

E non

Dictionary<string, string> 

In caso contrario, il costruttore sarà confondere per

object HtmlAttribute 

Non

così bella se ... ma funziona per la maggior parte.

Infine, tenere presente che se si include AngularJS dopo jQuery, verrà utilizzato jQuery per i selettori.

Answer 3

Forse utilizzare Angular per la convalida può essere meno doloroso di quanto si pensi. Utilizzando un paio di direttive personalizzati, si potrebbe facilmente ottenere qualcosa di abbastanza vicino a rasoio con markup semplice come:

<validated-input name=username display="User Name" ng-model=model.username required</validated-input> 

controllare il mio campione here e la sua ispirazione here. Al momento implementa solo richiesto e numero, ma personalizzarlo dovrebbe essere facile.

Answer 4

È possibile utilizzare la libreria ngval. Porta le annotazioni dei dati sul lato client come direttive di convalida di angularjs.

Answer 5

Per chiunque sia ancora alla ricerca di una soluzione a questo problema, esiste un modo semplice per farlo funzionare.

var currForm = $("#myForm"); 
currForm.removeData("validator"); 
currForm.removeData("unobtrusiveValidation"); 
$.validator.unobtrusive.parse(currForm); 
currForm.validate(); 

Si può inserire questo codice in $ viewContentLoaded o in altri luoghi che sono rilevanti nel codice.

Mentre capisco alcune delle viste qui che scoraggiano le viste MVC utilizzate come modelli per il tuo codice angolare. La mia ragione è che non è un modo naturale di fare le cose in modo angolare e quindi ci sono possibilità che ti imbatti in problemi come questo. Ma se si beneficia dell'uso di viste MVC come modelli, non è un percorso per l'inferno. L'IT funziona e può essere utile anche a te. Ho 2 casi d'uso nel mio progetto dove usare le viste MVC ha molto senso.

1. Il mio progetto ha in realtà un requisito di cui un client può trasformare della convalida richieste sul certo campo, per questo io uso i dati personalizzato annotazione validatore MVC che mi permette di aggiungere o rimuovere l'annotazione dei dati al momento di rendere la vista usando una singola classe, se si costruisse la stessa flessibilità in angolare, si dovrebbe scrivere molto più codice. Quindi le visualizzazioni MVC funzionano molto bene per me poiché le annotazioni dei dati personalizzati sono attivate dagli helper DisplayFor e EditorFor
2. Siamo fortemente investiti nell'internazionalizzazione e mentre l'angolare è eccezionale in altre cose l'internazionalizzazione non è la sua suite forte (al momento della stesura di questo atleast) Sento ancora il supporto per l'internazionalizzazione in MVC con .RESX funziona alla grande ed è qui da molto tempo. Ciò utilizza nuovamente il potere di annotazione dei dati di DisplayAttribute.

TLDR: le visualizzazioni MVC come modelli possono darti alcuni problemi imprevisti, ma ne vale la pena se si sta veramente sfruttando tutta la potenza della pipeline di annotazione dati creata da Microsoft.

Si spera che qualcuno in futuro fornisca una libreria di Helpers Angular HTML questo sarebbe molto più semplice.