重写此问题以澄清
如何检查转录表格在指令中的有效性?
我想检查myForm.$valid
指令中的link function
。我会在我的指令中注入不同类型的表格,或者以不同的形式使用我的指令,你可以说
难度很大,范围是孤立的,没有以下答案对我有用。
请在此处找到完整的代码,
https://plnkr.co/edit/K3IrE5KVehWXFM9JEMvE?p=preview
我希望在表单无效时禁用“保存”按钮。
答案 0 :(得分:8)
要回答您的主要问题,您可以像任何其他模型值一样公开和绑定表单:
angular.module("main", [])
.directive("formDirective", formDirective);
function formDirective() {
return {
restrict: "A",
scope: {
formModel: "=formModel"
},
link: function (scope, element, attrs) {
scope.$watch("formModel.$valid", function (newValue, oldValue) {
console.log(newValue, oldValue);
});
}
}
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="main">
<div form-directive form-model="myForm">
<div>
<form name="myForm">
<div>
<input type="text" ng-model="name" required="required">
</div>
Valid: {{myForm.$valid}}
</form>
<div>
</div>
</div>
&#13;
然而,从我们关于聊天的谈话中可以清楚地看出,你的整体问题更为复杂。
我在这里添加了一个工作示例:https://plnkr.co/edit/lkfdmc0PLRadfYFVhFAm?p=preview
这里要实现的关键方面是:
$uibModal.open
打开模式对话框,该对话框将实例化引用的控制器editCtrl
并加载您的模板editCtrl.html
。dialog.html
。请务必注意,esDlg指令的范围现在可以在dialog.html
的模板中使用,因此您可以访问指令声明的scope
中定义的所有属性。
您已经使用对话框标题和文字来使用它。答案 1 :(得分:3)
angular.module("main", [])
.directive("formDirective", formDirective);
function formDirective() {
return {
restrict: "A",
scope: {
formModel: "=name"
},
link: function (scope, element, attrs) {
scope.$watch("formModel.$valid", function (newValue, oldValue) {
console.log(newValue, oldValue);
});
}
}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="main">
<div my-directive>
<div>
<form name="myForm" form-directive>
<div>
<input type="text" ng-model="name" required="required">
</div>
Valid: {{myForm.$valid}}
</form>
<div>
</div>
</div>
&#13;
我建议你使用angular-auto-validate
答案 2 :(得分:2)
您是否正确定义了该指令?查看plunker,其中validity
已按预期记录。
function MyDirective() {
return {
restrict: 'AE',
scope: true,
link: function (scope, element, attrs) {
scope.$watch('myForm.$valid', function (validity) {
console.log(validity);
});
}
}
}
答案 3 :(得分:2)
我从你的代码创建了一个plunk,它似乎工作正常。请记住,只有当表单的有效状态从有效状态变为无效状态或反之时,它才会生成日志。
<div ng-app="my-app">
<div ng-controller="testCtrl">
<div my-directive>
<form name="myForm">
<input type="number" step="0.01" ng-model="rate" required>
</form>
</div>
</div>
</div>
Angular:
angular.module('my-app').directive('myDirective', function() {
return {
link: function(scope, element, attr, mCtrl) {
scope.$watch('myForm.$valid', function(validity) {
console.log(validity);
})
}
};
});