Демо-скрипт
Директива всплывающей подсказки для проверки
ValidationTooltip - это основная директива. Он имеет следующие обязанности:
- Определите шаблон подсказки с помощью включенного содержимого
- Следите за выражениями проверки, чтобы их можно было оценивать в каждом цикле дайджеста.
- Предоставьте API-интерфейс контроллера, чтобы разрешить директивам valiationMessage регистрироваться.
- Укажите атрибут target в директиве, чтобы указать, к какому полю формы будет привязан значок (и соответствующая всплывающая подсказка).
Дополнительные примечания
Шаблон всплывающей подсказки использует функцию включения из функции ссылки для привязки шаблона к области действия директивы. В области действия есть два свойства, к которым может быть привязан шаблон:
- $ form: привязан к модели формы, определенной в родительской области. то есть $ scope.myForm
- $ field: привязано к модели form.name в родительской области. то есть $ scope.myForm.myInput
Это позволяет шаблону связываться со свойствами проверки, такими как $ valid, $ invalid, $ pristine, $ dirty и $ error, без прямой ссылки на имя формы или имя поля ввода. Например, все следующие выражения являются допустимыми выражениями привязки:
Свойства $ формы:
- `$ form. $ valid`
- `$ form. $ invalid`
- `$ form. $ dirty`
- `$ form. $ нетронутая`
- `$ form. $ error.required` и т. д.
Свойства $ field:
- `$ field. $ valid`
- `$ field. $ invalid`
- `$ field. $ dirty`
- `$ field. $ pristine`
- `$ field. $ error.required` и т. д.
Реализация директивы
app.directive('validationTooltip', function ($timeout) {
return {
restrict: 'E',
transclude: true,
require: '^form',
scope: {},
template: '<span class="label label-danger span1" ng-show="errorCount > 0">hover to show err</span>',
controller: function ($scope) {
var expressions = [];
$scope.errorCount = 0;
this.$addExpression = function (expr) {
expressions.push(expr);
}
$scope.$watch(function () {
var count = 0;
angular.forEach(expressions, function (expr) {
if ($scope.$eval(expr)) {
++count;
}
});
return count;
}, function (newVal) {
$scope.errorCount = newVal;
});
},
link: function (scope, element, attr, formController, transcludeFn) {
scope.$form = formController;
transcludeFn(scope, function (clone) {
var badge = element.find('.label');
var tooltip = angular.element('<div class="validationMessageTemplate tooltip-danger" />');
tooltip.append(clone);
element.append(tooltip);
$timeout(function () {
scope.$field = formController[attr.target];
badge.tooltip({
placement: 'right',
html: true,
title: clone
});
});
});
}
}
});
Директива сообщения проверки
Директива validationMessage отслеживает сообщения проверки, отображаемые во всплывающей подсказке. Он использует ng-if для определения выражения для оценки. Если в элементе не найдено ng-if, тогда выражение просто оценивается как истинное (всегда отображается).
app.directive('validationMessage', function () {
return {
restrict: 'A',
priority: 1000,
require: '^validationTooltip',
link: function (scope, element, attr, ctrl) {
ctrl.$addExpression(attr.ngIf || true );
}
}
});
Использование в HTML
- Добавить форму с атрибутом имени
- Добавьте одно или несколько полей формы - каждое с атрибутом name и директивой ng-model.
- Объявите элемент
<validation-tooltip> с атрибутом target, относящимся к имени одного из полей формы.
- Примените директиву
validation-message к каждому сообщению с необязательным ng-if выражением привязки.
<div ng-class="{'form-group': true, 'has-error':form.number.$invalid}">
<div class="row">
<div class="col-md-4">
<label for="number">Number</label>
<validation-tooltip target="number">
<ul class="list-unstyled">
<li validation-message ng-if="$field.$error.required">this field is required </li>
<li validation-message ng-if="$field.$error.number">should be number</li>
<li validation-message ng-if="$field.$error.min">minimum - 5</li>
<li validation-message ng-if="$field.$error.max">miximum - 20</li>
</ul>
</validation-tooltip>
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="number" min="5" max="20" ng-model="number" name="number" class="form-control" required />
</div>
</div>
</div>
person
pixelbits
schedule
16.07.2014
