Использование просмотров бритвы с проверкой jQuery с помощью angularJS

Question

Я использую AngularJS в своем приложении MVC и пытаюсь использовать лучшее из обоих миров. Мне очень нравится, как вы можете в MVC настроить логику проверки в моделях viewmodels и произвести проверку на стороне клиента с помощью проверки jQuery в ваших представлениях бритвы без особых усилий. Я использую AngularJS, чтобы получить поведение SPA с маршрутизацией и т.д., но когда я создаю вид бритвы, которые я использую, чтобы впрыснуть на страницу с: <div data-ng-view="data-ng-view"></div>

затем проверка JQuery перестает работать, даже если эти файлы скрипт ссылка на страница, на которой вводится представление. Ниже мой взгляд бритвы:

@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

Прежде всего, ИМО, используя бритву, чтобы сделать ваши шаблоны таят в себе опасность, в лучшем случае. Как правило, вы хотите использовать статический HTML для своей страницы и шаблонов директив, а затем извлекать и отправлять данные как AJAX в свой API. На самом деле веб-API ASP.NET действительно хорош. Если ваша базовая модель имеет валидацию, то вызовы API плохой сети вызовут исключение, которое вы можете поймать в обработчике $ http или $ resource и показать пользователю. Смешивание стандартных сообщений HTTP-формы с AngularJS будет ... сложным.

Чтобы достичь того, чего вы хотите, я думаю, что кому-то (а не мне) пришлось бы написать эквивалент AngularJS для jQuery Unobtrusive Validation library, который сам использует jQuery Validate plugin. Не тривиально. Я лично не вижу, как скоро произойдет уклонение в углу, тем более, что оно больше связано с разметкой и меньше связано с объектом конфигурации JS.

Возможно, вы могли повторно инициализировать проверку, когда представление закончило загрузку, используя the $viewContentLoaded event. Но, пожалуйста, не надо.

Answer 2

Мне больно, что всюду Я посмотрел, что мы получаем те же ответы: «HTML должен быть просто шаблоном». Может быть, но я просто не готов делегировать все на JavaScript

Вместо того, чтобы использовать анонимный объект для передачи атрибутов HTML, попробуйте использовать словарь

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

Убедитесь, что

Dictionary<string, object> 

И не

Dictionary<string, string> 

В противном случае конструктор будет путать его

object HtmlAttribute 

не как красивый, хотя ... но он работает по большей части.

Наконец, имейте в виду, что если вы включите AngularJS после jQuery, то он будет использовать jQuery для селекторов.

Answer 3

Возможно использование углового для проверки может быть менее болезненным, чем вы думаете. Используя несколько пользовательских директив, вы можете легко получить что-то совсем близко к бритве с разметкой так просто, как:

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

Отъезд мой образец here и его вдохновение here. Он только реализует требуемые и число в данный момент, но настроить его должно быть легко.

Answer 4

Вы можете использовать библиотеку ngval. Он представляет аннотации данных на стороне клиента как директивы валидации angularjs.

Answer 5

Для тех, кто все еще ищет решение этой проблемы, есть простой способ заставить ее работать.

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

Вы можете поместить этот код в $ viewContentLoaded или в другие места, которые имеют отношение к вашему коду.

Хотя я понимаю некоторые из видов, которые препятствуют просмотрам MVC, используемым в качестве шаблонов для вашего Углового кода. Моя причина быть его не естественным способом делать вещи в угловом и, следовательно, есть вероятность, что у вас возникнут проблемы, подобные этой. Но если вы используете использование MVC-представлений в качестве шаблонов, это не путь к аду. ИТ работает и может принести вам пользу. У меня есть два варианта использования в моем проекте, где использование MVC-представлений имеет большой смысл.

1. Мой проект на самом деле имеет требование, где клиент может обратиться требуемой проверки на определенной области, для этого я использую MVC аннотаций пользовательских данных валидатор, который позволяет мне добавлять или удалять аннотацию данных во время рендеринга вид с использованием одного класса, если вы должны были создать такую ​​же гибкость в угловом, вам придется писать намного больше кода. Таким образом, MVC отлично работает для меня, так как пользовательские аннотации данных запускаются с помощью DisplayFor и EditorFor помощников
2. Мы в большой степени инвестируем в интернационализацию, и в то время как угловая отличная работа в других областях, интернационализация не является ее сильным набором (на момент написания этого по крайней мере). Я по-прежнему чувствую поддержку интернационализации в MVC с помощью .RESX отлично работает и был здесь долго. Это снова использует силу аннотации данных DisplayAttribute.

TLDR: MVC рассматривает как шаблоны, может дать вам несколько неожиданных проблем, но стоит того, если вы действительно используете всю мощь конвейера аннотаций данных, созданного Microsoft.

Надеюсь, что кто-то придумает библиотеку Угловых HTML-помощников в будущем, это было бы намного проще.