Использовать ui-validate внутри шаблона директивы
Можно ли использовать ui-validate внутри шаблона директивы, как пример plunker?
Плункер: http://plnkr.co/edit/H6v6nVobIM3EKmAVHZHa?p=preview
template.html
<div class="form-group" ng-class="{'has-error' : !isValid()}">
<label for="{{name}}" class="control-label">{{label}}</label>
<div class="input-group">
<span class="input-group-addon">US$</span>
<input type="number"
ng-model="ngModel"
ng-required="isRequired"
ui-validate="'$value > 0'"
class="form-control"
name="{{name}}"
id="{{name}}"
/>
</div>
</div>
script.js
.directive('currency', function() {
return {
restrict : 'E',
replace : true,
transclude : true,
require : 'ngModel',
scope : { ngModel: '=' },
templateUrl : 'template.html',
link : function(scope, elm, attr, ctrl) {
scope.name = (attr.name || 'undefinedName');
scope.label = (attr.label || 'undefinedLabel');
scope.isRequired = (attr.required !== undefined);
scope.isValid = function() {
return ctrl.$valid;
};
}
};
});
Использование:
<currency ng-model="foo.value" name="value" label="Value:" required></currency>
1 ответ
Решение
Сандер Элиас:
ngModel очень мощная, но в то же время очень требовательная. Из-за transclude и изолированной области видимости ngModel не регистрируется в форме. но для ui-validate достаточно получить сам ng-контроллер.
Чтобы решить в основном просто удалить из директивы:
require : 'ngModel'
и сделать:
var ctrl = elm.find('input').data('$ngModelController');
Полное обсуждение можно увидеть по адресу: