Универсальная входная директива Angularjs со встроенной проверкой

Question

Универсальная входная директива Angularjs со встроенной проверкой

0

Я пытаюсь написать общую директиву ввода со встроенной проверкой. Но я, похоже, не могу проверить правильность (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>

JeffC 28 окт. 2015, в 14:44

Источник

0

Похоже, что myForm не существует в вашей изолированной области видимости.
Brett Henderson 28 окт. 2015, в 14:24
0

ОК, я понял это. Спасибо, Бретт, комментарий был полезен.
JeffC 28 окт. 2015, в 18:46

Теги:

generics

angularjs

validation

directive

1 ответ

Ещё вопросы

Похоже, что myForm не существует в вашей изолированной области видимости.
ОК, я понял это. Спасибо, Бретт, комментарий был полезен.

JeffC · Answer 1 · 2015-10-28T17-37-00.000Z

Для кого-то другого с аналогичной проблемой. Спасибо за комментарий, это заставило меня ответить. См. Пересмотренный код ниже. Проблема заключалась в доступе к форме в изолированной области, а также в попытке использовать имя формы, а не объект 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>