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

如果在指令中使用隔离范围，则可以使用“=”表示法（双向绑定）在该范围内传递表单有效性的状态。为此，您需要稍微修改指令的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指南。

Answer 2

指导间通信和最佳实践的推荐方法之一是使用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 ，以便它可以访问它。您现在可以访问整个form API并拥有更多可能性。

BTW：为此创建绑定是不必要的（如现在接受的其他答案）。

从Outside指令访问表单验证

2 个答案: