2015-11-15 2 views
1

Имея директиву, my-drtv, с <input ng-required="true"> в пределах <div ng-form="myForm">.Привязать внутреннюю директиву к ее исходной форме

В настоящее время внутренняя ng-required не связывается с его формой (myForm), как я мог установить в my-drtv ту же форму, что и его родителей?

(так что в исходном состоянии myForm.$valid должно быть ложным)

JS:

var myAppModule = angular.module('myAppModule', []). 
    directive('myDrtv',function(){ 
     return { 
      restrict: 'A', 
      template: '<div><input ng-required="true"></div>' 
     } 
    }); 

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
<html ng-app="myAppModule"> 
<body> 
    <div ng-form="myForm"> 
     <div my-drtv> 
     </div> 
     <br> 
     {{myForm.$valid}} 
    </div> 
</body> 
</html> 

ответ

1

Для того чтобы иметь поведение проверки поля ввода должен иметь атрибуты ngModel и name. Затем он будет зарегистрирован как контроль в контроллере формы. Таким образом, вы могли бы сделать

.directive('myDrtv', function() { 
    return { 
     restrict: 'A', 
     template: '<div><input name="inp" ng-model="inp" ng-required="true"></div>' 
    } 
}); 

или лучшую модель прохода и имя из-за пределов, то директива станет гораздо более многоразовые:

.directive('myDrtv', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      model: '=ngModel' 
     }, 
     template: function(element, attrs) { 
      return '<div><input name="' + attrs.name + '" ng-model="model" ng-required="true"></div>'; 
     } 
    } 
}); 

и использовать его как это:

<div ng-form="myForm"> 
    <div my-drtv name="some" ng-model="someField"></div> 
</div> 

Demo :http://plnkr.co/edit/FV7jeiuLvqPmIlVyyXWr?p=preview

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