Question

我正在使用自定义角度表单验证来验证基于字段的字段，该字段具有值和下拉列表的选定值。我在页面上使用相同的代码段（因此使用相同的指令）两次。所以我可以重复使用，我尝试向该指令发送一个参数。这一切都很好。但是，当创建子范围时，它会将我的双向绑定分解回fruit.cost。

Here is an example fiddle

我做错了什么？我希望所有验证工作相同，但也保留双向绑定。这是我的小提琴代码的副本：

JS

function MainCtrl($scope){
  $scope.localFruits = [
      {name: 'banana'},
      {name: 'orange'},
      {name: 'grape'}
  ];
  $scope.fruits = [
      {name: 'banana'},
      {name: 'orange'},
      {name: 'grape'}
  ];
  $scope.costRequired = [
      'local',
      'overseas'
  ];
  $scope.selectedCostRequired = '';
}

angular.module('test', []).directive('customRequired', function() {
  return {
      restrict: 'A',
      require: 'ngModel',
      scope: {
          requiredWhenKey: '=',
          cost: '=' // I think the problem is here?? Can't figure out how to pass the property I want to bind to
      },
      link: function(scope, elem, attrs, ctrl) {
          //console.log(scope);
          function isValid(value) {
              if (scope.$parent.selectedCostRequired === scope.requiredWhenKey) {
                  return !!value;
              }
              return true;
          }

          ctrl.$parsers.unshift(function(value) {
              var valid = isValid(value);
              scope.$parent.subForm.cost.$setValidity('customRequired', valid);
              return valid ? value : undefined;
          });

          ctrl.$formatters.unshift(function(value) {
              scope.$parent.subForm.cost.$setValidity('customRequired', isValid(value));
              return value;
          });

          scope.$watch('$parent.$parent.selectedCostRequired', function() {
              scope.$parent.subForm.cost.$setValidity('customRequired', isValid(ctrl.$modelValue));
          });
      }
  };
});

HTML

<div ng-app="test" ng-controller="MainCtrl">
<form name="form">
    Which grouping is required? <select name="costRequired" ng-model="selectedCostRequired" ng-options="t for t in costRequired"></select>
    <h2>Local</h2>
    <div ng-repeat="fruit in localFruits" ng-form="subForm">
        {{fruit.name}}: <input name="cost" ng-model="fruit.cost" required-when-key="'local'" custom-required/> bound value is: [{{fruit.cost}}]
        <span class="error" ng-show="subForm.cost.$error.customRequired">Required</span>
    </div>
    <h2>Overseas</h2>
    <div ng-repeat="fruit in fruits" ng-form="subForm">
        {{fruit.name}}: <input name="cost" ng-model="fruit.cost" required-when-key="'overseas'" custom-required/> bound value is: [{{fruit.cost}}]
        <span class="error" ng-show="subForm.cost.$error.customRequired">Required</span>
    </div>
    <div ng-show="form.$invalid" class="error">some form error(s) still exist</div>
    <div ng-show="!form.$invalid" class="okay">form looks good!</div>
</form>
</div>

Answer 1

将ng-model与在同一元素doesn't work上创建隔离范围的指令一起使用。

我建议您不要创建新范围，也不要使用scope: true。

这是一个不创建新范围的简化示例：

<form name="form">
    <div ng-repeat="fruit in localFruits">
        {{fruit.name}}: 
        <input ng-model="fruit.cost" required-when-key="local" custom-required/> 
        bound value is: [{{fruit.cost}}]
    </div>
</form>

function MyCtrl($scope) {
    $scope.localFruits = [
      {name: 'banana'},
  ];
}
app.directive('customRequired', function() {
  return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, elem, attrs, ctrl) {
          console.log(attrs.requiredWhenKey);
      }
  };
});

fiddle

由于required-when-key属性只是一个字符串，因此您可以使用attrs.requiredWhenKey获取该值。

如果您不创建新范围，您还应该能够删除指令中的大多数$parent查找。

AngularJS：在指令中创建新的子范围时，双向绑定中断

1 个答案: