angularjs - 检查AngularJS指令中字段的有效性

Question

我想根据也位于指令中的文本字段的有效性启用/禁用指令中的按钮，而不必知道父表单名称（这将使我的指令的可重用性大大降低）。

这是问题的一个例子。

.directive('sendEmail', function () {
return {
  scope: {
    email: '='
  },
  require: 'ngModel',
  replace: true,
  template:
    '<input name="email" type="email ng-model="email">' + 
    '<button ng-disabled="myForm.email.$invalid">Send confirmation email</button>',

  link: function (scope, element, attrs, ctrl) {
    // Do something useful in here.
  }

};

});

理想情况下，我能够做一些事情，这意味着我可以编写这个指令而不必知道<form name="myForm">

我非常感谢有关如何以角度方式做到这一点的想法。

Answer 1

您可以ngForm在指令模板内部使用并引用该表单来验证按钮。

.directive('sendEmail', function () {
    return {
        scope: {
            email: '='
        },
        require: 'ngModel',
        replace: true,
        template: '<div ng-form name="myForm"><input name="email" type="email ng-model="email"><button ng-disabled="myForm.email.$invalid">Send confirmation email</button></div>',
        link: function (scope, element, attrs, ctrl) {
        }
    };
});

Answer 2

您可以像这样动态编译模板并渲染。请看一下我创建的演示。

Demo on jsFiddle

app.directive('sendEmail', function ($compile) {
    return {
        restrict: 'E',
        require: 'ngModel',
        replace: true,

        link: function (scope, element, attrs, ctrl) {
            var formName = element.parent().prop('name');
            var template = '<div><input name="email" type="email" ng-model="email">' +
                '<button ng-disabled="' + formName + '.email.$invalid">Send confirmation email</button></div>';

            element.html(template);
            $compile(element.contents())(scope);
        }
    };
});