angularjs - 更改输入约束后如何更新 AngularJS 中的表单 Controller

Question

我最近一直致力于动态更改表单上输入字段的约束。目的是制作一个后端驱动的表单，而所有字段及其约束都由服务器发送给我们。虽然我设法通过创建一个简单的指令来添加/删除约束，但表单 Controller 似乎没有接受这些更改，因此表单始终是 $valid。看看this jsfiddle ，这是指令:

myApp.directive('uiConstraints', [function(){

function applyConstraints(element, newVal, oldVal){
    //remove old constraints
    if(oldVal !== undefined && oldVal !== null){
        for (var i = 0; i < oldVal.length; i++) {
            element.removeAttr(oldVal[i].key);
        }
    }

    //apply new constraints
    if(newVal !== undefined && newVal !== null){
        for (var i = 0; i < newVal.length; i++) {
            var constraint = newVal[i];
            element.attr(constraint.key, constraint.value);
        }
    }
}

function link(scope, element, attrs){
    scope.$watch(attrs.uiConstraints, function(newVal, oldVal){
        applyConstraints(element, newVal, oldVal);
    });
}

return {
    restrict : 'A',
    link : link
};

}]);

所需的行为就像在 official angularjs plunker 上一样工作。 。但是，似乎 FormController 是在指令填充输入字段上的约束之前创建的，并且更新这些约束不会更新 FormController 中的相应值。

有谁知道我是否可以强制 FormController 拾取指令对约束所做的更改？如果是这样，怎么办？我不知道从哪里开始......谢谢。

-- 编辑 --
我无法让 plunker 工作(向其他人展示我的最新更改)，所以这里是我所拥有的 jsfiddle:latest
要更详细地描述该问题:

1. 转到描述的 jsfiddle
2. 如果从文本框中删除初始值，它将变为红色(无效)，但 Controller 不会拾取该值，并且仍会显示:

myform.$valid = true
myform.myfield.$valid = true

-- 编辑 --
赏金描述无法识别 Stack Overflow 格式(例如换行符 2 个空格等)，因此这里采用更易读的形式:

Since this is still unsolved and interesting question I decided to start a bounty.
The requirements are:
- works on ancient AngularJS(1.0.3) and newer (if it can't be done on 1.0.3 but someone did it on newer version of angular I will award bounty)
- initially a field has no constraints on it (is not required, max and min not set etc)
- at any time constraints for the field can change (it can become required, or a pattern for the value is set etc), as well as any existing constraints can be removed
- all constraints are stored in a controller in an object or array
- FormController picks up the changes, so that any $scope.FormName.$valid is being changed appropriately when constraints on any fields in that form change

A good starting point is my jsfiddle.
Thanks for your time and good luck!

Answer 1

看看这个 PLUNK

.directive('uiConstraints', ["$compile",
function($compile) {
  function applyConstraints(element, newVal, oldVal) {
    //apply new constraints
    if (newVal !== undefined && newVal !== null) {
      for (var i = 0; i < newVal.length; i++) {
        var constraint = newVal[i];
        element.attr(constraint.key, constraint.value);
      }
    }
  }

  return {
    restrict: 'A',
    terminal: true,
    priority: 1000,
    require: "^form",
    link: function(scope, element, attrs, formController) {
      var templateElement;
      var previousTemplate;
      templateElement = element.clone(); //get the template element and store it 
      templateElement.removeAttr("ui-constraints");// remove the directive so that the next compile does not run this directive again
      previousTemplate = element;

      scope.$watch(attrs.uiConstraints, function(newVal, oldVal) {
        var clonedTemplate = templateElement.clone();
        applyConstraints(clonedTemplate, newVal);
        clonedTemplate.insertBefore(previousTemplate);

        var control = formController[previousTemplate.attr("name")];
        if (control){
           formController.$removeControl(control);
        }
        if (previousTemplate) {
          previousTemplate.remove();
        }

        $compile(clonedTemplate)(scope);
        previousTemplate = clonedTemplate;
      });
    }
  };
}]);

这里的想法是设置 terminal: true 和 priority: 1000 让我们的指令首先被编译并跳过同一元素上的所有其他指令，以获得模板元素。如果您需要了解更多，请查看我的回答:Add directives from directive in AngularJS 。

获取模板元素后，我删除了ui-constraints指令，以避免该指令一次又一次地编译，会添加每次我们切换约束时，$watch 都会进入摘要循环。

每当约束发生变化时，我都会使用此模板元素构建一个包含所有约束的新元素，而无需 ui-constraints 指令并编译它。然后，我从 DOM 中删除前一个元素，并从表单 Controller 中删除其 Controller ，以避免由于表单 Controller 中存在前一个元素的 Controller 而导致泄漏和问题。