javascript - 当输入具有范围指令时，Angularjs 绑定(bind)问题

Question

我在 AngularJS 中创建了一个自定义指令。该指令使用隔离范围，它以某种方式阻止了同一元素上标准 ngModel 的绑定(bind)。 我想创建一个确认密码字段(示例中的文本以提高可读性)。

<input type="text" name="one" ng-model="fields.field_one">
<input type="text" validate-match="fields.field_one" name="two" ng-model="field_two">

当没有匹配项时，我的指令使该字段无效。

app.directive('validateMatch', function() {
  return {
    require: 'ngModel',
    scope: { matchValue: '=validateMatch' },
    link: function(scope, elm, attr, ctrl) {
      scope.$watch('matchValue', function(value) {
        ctrl.$setValidity('match', 
            ctrl.$viewValue === value
            || !ctrl.$viewValue && !value);
        });

      function validate(value) {
        ctrl.$setValidity('match', value === scope.matchValue);
        return value;
      }
      ctrl.$parsers.push(validate);
      ctrl.$formatters.push(validate);
    }
  }
});

问题是，为什么我不能通过更改模型来更改该字段的值？第一个字段工作得很好。

查看plunker有关详细信息和注释代码。

Answer 1

如评论中所述，隔离作用域和 ng-model 不能很好地混合。此外，我们不应该在这里使用隔离范围，因为我们正在尝试创建一个需要与另一个指令(在本例中为 ng-model)交互的指令/组件。

由于 validateMatch 指令不创建任何新属性，因此该指令不需要创建任何新范围。 $parse可用于获取属性 validate-match 引用的属性的值:

app.directive('validateMatch', function($parse) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attr, ctrl) {
      var model = $parse(attr.validateMatch);

      // watch for linked field change (field_one)
      scope.$watch(model, function(value) {
        console.log('linked change:', value, ctrl.$viewValue);
        // set valid if equal or both falsy (empty/undefined/null)
        ctrl.$setValidity('match', 
            ctrl.$viewValue === value
            || !ctrl.$viewValue && !value);
      });

      // validate on parse/format (field_two)
      function validate(value) {
        var otherFieldValue = model(scope);
        console.log('validate:', value, otherFieldValue);
        // set valid if equal
        ctrl.$setValidity('match', value === otherFieldValue);
        return value;
      }

      ctrl.$parsers.push(validate);
      ctrl.$formatters.push(validate);
    }
  };
});

plunker