Question

我的项目中有很多表单，所有表单都有一组特定的验证表达式。最重要的是，我还附加了一个加载元素，因此在整个项目中重复使用该按钮非常困难。考虑到这一点，我想我可以使用指令代替。问题是，当我通过属性传递表达式时，它不会更新/验证用户输入数据。基本上它只是与属性一起使用，如果它是一个字符串而不是一个表达式。

简而言之，我一直在努力实现的目标是：

<submit-button label="My Label" validate="!myForm.$valid"></submit-button>

将返回类似的内容：

<button ng-disabled="!myForm.$valid">My Label</button>

这是关于jsfiddle的基本孤立模板，目前为止：https://jsfiddle.net/lucasbittar/8m992bet/3/

非常感谢你！

Answer 1

在该版本的Angular中实现此目的的最简单方法是在指令上使用双向属性绑定。将validate属性/ scope属性绑定到表达式，并在ngDisabled指令中引用它。

需要注意的一点是，ngDisabled（以及其他ng - 前缀指令（IIRC）直接对表达式进行操作，因此不应使用双括号来插值它们。

指令代码变为：

function submitButton () {
  var submit = {
    restrict: 'E',
    require: ['^form'],
    template: '<button ng-disabled="validate">{{ label }}</button>',
    scope: {
      validate: '='
    },
    link: link
  }
  return submit;

  function link (scope, el, attr, formCtrl) {
    scope.label = attr.label;
  }
}

在这里查看工作小提琴：https://jsfiddle.net/8m992bet/6/

请注意，如果您愿意，您还可以使用指令上的继承范围与scope.$watch结合使用来模仿上述内容，但使用双向绑定更容易。

另请注意，在Angular 1.5上，您可以使用<代替=对指令使用单向绑定。

Angular Directive：使提交按钮指令听取表单验证

1 个答案: