Валидационные сообщения в Директиве - AngularJS

Я пытаюсь сделать небольшой компонент многократного использования в AngularJS с использованием директив. Я достиг хорошего прогресса, но у меня проблема с проверками. Например, требуемая проверка не работает. Я думаю, это «обязательная» проблема.Валидационные сообщения в Директиве - AngularJS

Мой HTML-код: также в http://jsfiddle.net/pQwht/17/

<html ng-app="myApp"> 
<body> 
<form ng-controller="Ctrl" 
    id="paymentCallForm" 
    action="#" 
    name="paymentCallForm"> 
    <table> 
    <tr tdfield 
     labelname="Primary Account Number:" 
     fieldname="primaryAccountNumber" 
     title="Primary title" 
     > 
    </tr> 
    </table>

Моя директива сценарий:

angular.module('myApp').directive('tdfield', function() { 
    return { 
    restrict: 'A', 
    replace:false, 
    transclude: false, 
    scope: { labelname: '@', fieldname: '@', title: '@'}, 
    templateUrl:'element.html' 
    }; 
});

Мой код element.html:

<td id="lbl_paymentReference" class="formInputLabelWrapper">{{labelname}}</td> 
<td class="formInputTextWrapper"> 
    <input id="{{fieldname}}" 
    name="{{fieldname}}" 
    title="{{title}}" 
    class="large empty" 
    required> 
<span data-ng-show="paymentCallForm.{{fieldname}}.$error.required" 
    class="error">Error</span></td>

источник

2013-04-26 Gere

Ваш <таблица не имеет закрытия> – Ketan

Спасибо Ketan, была ошибкой ввода. В jsfiddle верно. – Gere

Ну, я решил это, но за какую цену. Среди них есть ряд проблем и углов. Я не могу вспомнить все, так что вот рабочий пример https://github.com/yaroslav-ulanovych/soq16245177.

Когда вы определяете параметр scope как scope: { labelname: '@', fieldname: '@', title: '@'}, (с объектом как значением), который создает изолированную область видимости, что означает, что она не унаследована от родительской. Поэтому здесь ng-show="paymentCallForm.{{fieldname}}.$error.required" не имеет доступа к форме. В качестве обходного решения ng-show="$parent.paymentCallForm.{{fieldname}}.$error.required", но я не проверял, публикуются ли ваши входы в форме в случае изолированного объема. Или scope: true и вводить атрибуты в область вручную.

compile: function() { 
    return { 
     pre: function (scope, element, attr) { 
      scope.fieldname = attr.fieldname; 
     } 
    } 
}

Замечание об использовании функции prelink, так что она вызывается до того, как будут связаны дети.

В следующем ng-show на самом деле будет использоваться не интерполированное выражение, и, очевидно, нет свойства с именем {{fieldname}} в форме. Это исправлено в более поздних версиях Angular, не знаю, когда именно, потому что я использую master.

Но то, что не установлено, является ngModelController. Это получает свое имя очень рано, поэтому публикуется в форме под неправильным. Я должен был исправить это сам, хорошо, что есть только одна строка, чтобы сделать это, в файле src/ng/directive/input.js.

// add 
modelCtrl.$name = attr.name; 
// before this 
formCtrl.$addControl(modelCtrl);

источник

2013-04-27 08:57:13 Yaroslav

Спасибо, Ярослав. Ваш пример работает. Это очень полезно. – Gere

Ярослав, для использования угловой 1.1.1 в element.html Я использовал Ошибка – Gere

Это работает, потому что для ввода и для диапазона используется одно и то же имя поля, которое является '{{fieldname}}', а не 'primaryAccountNumber'. Если вы добавите вторую строку в таблицу, вы увидите, что ее вход игнорируется, а первый вход контролирует оба диапазона. – Yaroslav

Я считаю, что вам нужен контроллер, присоединенный к Ваше мнение. Объект формы будет привязан к свойству с идентификатором формы на объекте $scope этого контроллера. Как только вы добавите это, я думаю, что он начнет появляться.

источник

2013-04-26 23:54:32 Ketan

Валидационные сообщения в Директиве - AngularJS

ответ

Смежные вопросы