javascript - 从外部指令访问表单验证

Question

我是 Angular 初学者。我的表单具有验证功能，仅在验证通过时启用保存按钮

<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>'
            }
        });

但是即使表单有效，指令保存按钮也始终处于禁用状态!!!。注意:我将保存按钮保留在表单内以了解验证

请查看here在工作示例中

如何从 mysavebtn 指令访问表单验证？请指教。

Answer 1

如果您在指令中使用隔离范围，则可以使用“=”符号(双向绑定(bind))在该范围内传递表单有效性的状态。为此，您需要稍微修改指令的 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 。 有关更多信息，请阅读 Angular directive指南。