Я новичок в angular.I имеет форму, которая имеет валидацию, которые позволяют кнопку сохранения только на валидации
<input type="submit" value="Save" ng-disabled="!frmRegister.$valid" />
У меня есть директива, которая позаботится о подаче формы во всем мире.
app.directive('mysavebtn',function(){
return {
restrict : "E",
scope :{
},
controller : function($scope){
},
link : function(scope,elem,attr){
},
template : '<div style="clear:both;" >'
+'<input type="submit" ng-disabled="!frmRegister.$valid" value="Directive Save" />'
+'</div>'
}
});
Но кнопка сохранения директивы всегда отключается, даже если форма действительна !!!. Примечание. Я сохраняю кнопку сохранения внутри формы, чтобы узнать подтверждение
Пожалуйста, проверьте здесь, в рабочем примере
Как получить доступ к проверке формы из директивы mysavebtn? Пожалуйста посоветуй.
Если вы используете изолированную область внутри своей директивы, вы можете передать состояние действительности в этой области, используя обозначение "=" (двусторонняя привязка). Для этого вам нужно немного изменить HTML своей директивы:
<mysavebtn form-valid="frmRegister.$valid"></mysavebtn>
а также JS:
app.directive('mysavebtn', function() {
return {
restrict: "E",
scope: {
formValid: "="
},
controller: function($scope) {
},
link: function(scope, elem, attr) {
},
template: '<div style="clear:both;" >' + '<input type="submit" ng-disabled="!formValid" value="Directive Save" />' + '</div>'
}
});
Теперь состояние действительности формы доступно внутри шаблона директивы через переменную formValid. См. Рабочий PLNK. Для получения более подробной информации читайте Угловое директива руководства.
Одним из рекомендуемых способов между директивного общения и передовой практикой является использование require
, чтобы получить доступ к другому контроллеру директивы (form
директивы в данном случае).
Я изменил ваш plnkr: http://plnkr.co/edit/rGxmu7M33Ftb52MobzdK?p=preview
app.directive('mysavebtn', function () {
return {
restrict: 'E',
require: '^form',
scope: {},
link: function(scope, elem, attrs, formCtrl) {
scope.formCtrl = formCtrl;
},
template: '<div style="clear:both;">' +
'<input type="submit" ng-disabled="!formCtrl.$valid" value="Directive Save" />' +
'</div>'
}
});
Поместите ваш mysavebtn
в form
чтобы он имел к нему доступ. Теперь у вас есть доступ к API всей form
и возможности гораздо больше.
BTW: Создание привязки для этого необязательно (как в уже принятом другом ответе).