Я пытаюсь написать общую директиву ввода со встроенной проверкой. Но я, похоже, не могу проверить правильность (ng-show).
Я предполагаю, что я действительно не понимаю, когда предметы оцениваются угловыми и добавляются в список наблюдения, но я не уверен.
Мой фактический контроль сложнее, но для упрощения этой версии была создана упрощенная версия. Сгенерированный HTML (просмотр с инспектором) выглядит так, как будто он должен работать. Что мне не хватает? Вот: Тест проверки плунжера
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="[email protected]" data-semver="1.4.7" src="/angular.min.js"></script>
<link rel="stylesheet" href="//style.css" />
<script src="//script.js"></script>
</head>
<body>
<form name='myForm'>
<h1>Validation Test</h1>
Name: <my-input uname='userName'></my-input><br>
Phone: <my-input uname='phone'></my-input><br>
</form>
<script>
var app = angular.module('myApp',[]);
app.directive('myInput',function(){
return {
requires: '^form',
replace:true,
scope:{
uname:'='
},
restrict: 'E',
template: function(element,attr){
return '<div><input class="reqclass" ng-model="' + attr.uname + '" name="' + attr.uname + '" ng-minlength="5"></input><span ng-show="myForm.' + attr.uname + '.$error.minlength">Too short!</span></div>'
}
};
});
</script>
</body>
</html>
Для кого-то другого с аналогичной проблемой. Спасибо за комментарий, это заставило меня ответить. См. Пересмотренный код ниже. Проблема заключалась в доступе к форме в изолированной области, а также в попытке использовать имя формы, а не объект scope.form. ПРИМЕЧАНИЕ : require: ['form', '? NgModel'] и в ссылке: scope.form = ctrls [0] и пересмотренной ng-show = "form." + attr.uname + '. $ error.minlength " Plunker выше также был пересмотрен, чтобы отразить исправление
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="[email protected]" data-semver="1.4.7" src="/angular.min.js"></script>
<link rel="stylesheet" href="//style.css" />
<script src="//script.js"></script>
</head>
<body>
<form name='form'>
<h1>Validation Test</h1>
Name: <my-input uname='userName'></my-input><br>
Not Directive: <div><input class="reqclass" name="city" ng-model="city" ng-minlength="5"/><span ng-show="form.city.$error.minlength">Too short!</span></div><br>
Phone: <my-input uname='phone'></my-input><br>
</form>
<script>
var app = angular.module('myApp',[]);
app.directive('myInput',function(){
return {
require: ['^form', '?ngModel'],
replace:false,
scope:{
uname:'='
},
restrict: 'E',
template: function(element,attr){
return '<div><input class="reqclass" name="' + attr.uname + '" ng-model="' + attr.uname + '" ng-minlength="5"/><span ng-show="form.' + attr.uname + '.$error.minlength">Too short!</span></div>'
},
link: function(scope, element, attrs, ctrls) {
scope.form = ctrls[0];
var ngModel = ctrls[1];
}
}
});
</script>
</body>
</html>