角自定义的验证指令断裂其它指令

我试图建立这验证使用来自外部范围通过自定义函数输入字段指令，例如：角自定义的验证指令断裂其它指令

HTML：

<input type="text" custom-validator="checkValidity"/>

控制器：

$scope.checkValidity = function(value){ 
    return $scope.invalidWords.indexOf(value) === -1; 
}

我创建了一个详细的plunker此：http://plnkr.co/edit/H5A5O3?p=preview

验证工作，但它似乎打破了默认指令，在这种情况下ng禁用不起作用，我不能访问ng模型中使用的变量！

这是我的指令：

app.directive('customValidator', function() { 
    return { 
     require: "ngModel" 
    , scope: { customValidator: '='} 
    , link: function postLink(scope, elm, attrs, ctrl) { 
      var validator = function(value) { 
      if(scope.customValidator && scope.customValidator(value)) { 
       ctrl.$setValidity('custom-validator', true); 
       return value; 
      } 
      ctrl.$setValidity('custom-validator', false); 
      return undefined; 
      } 
      ctrl.$parsers.unshift(validator); 
      ctrl.$formatters.unshift(validator); 
     }  
    } 
});

我想不出什么错误，我真的需要帮助！

我应该留在角1.0.7

来源

2013-08-21 destegabry

在不工作的inputB原因ng-disabled是要创建通过您的指令，一个新的范围：

scope: { customValidator: '=' }

要保持你的模型inputB在与inputA相同的范围，你可以这样做：

app.directive('customValidator', function() { 
    return { 
     require: "ngModel", 
     scope: false, 
     link: function postLink(scope, elm, attrs, ctrl) { 
      var validator = function(value) { 
       customValidator = scope[attrs["customValidator"]]; 
       if(customValidator(value)) { 
        ctrl.$setValidity('custom-validator', true); 
        return value; 
       } 
       ctrl.$setValidity('custom-validator', false); 
       return undefined; 
      } 
      ctrl.$parsers.unshift(validator); 
      ctrl.$formatters.unshift(validator); 
     } 
    } 
});

来源

2013-08-21 08:04:15 AlwaysALearner

它会工作_but_我无法传递一个自定义函数。在我的情况下，我必须使用3种不同的函数来输入3个表单。我试过'transclude：true'，但它似乎不能解决这个问题... – destegabry

@destegabry看看我使用'attrs'的更新指令。 – AlwaysALearner

非常感谢你！ – destegabry

ng模型和隔离范围don't mix well，所以遵循@ Codezilla的建议，不要创建新的范围。

不过，我建议使用$解析，这使我们能够清楚，我们正在传递一个函数与一个单一的（命名）参数的指令中的HTML注明：

<input type="text" ... custom-validator="checkValidity(val)">

app.directive('customValidator', function($parse) { 
    return { 
     require: "ngModel", 
     //scope: false, 
     link: function postLink(scope, elm, attrs, ctrl) { 
      var validationFn = $parse(attrs.customValidator); 
      var validator = function(value) { 
       if(validationFn(scope, {val: value})) { 
        ctrl.$setValidity('custom-validator', true); 
        return value; 
       } 
       ctrl.$setValidity('custom-validator', false); 
       return undefined; 
      } 
      ctrl.$parsers.unshift(validator); 
      ctrl.$formatters.unshift(validator); 
     } 
    } 
});

plunker

来源

2013-08-21 14:10:06

角自定义的验证指令断裂其它指令

回答

相关问题