检查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);
        }
    };
});