javascript - 对自定义验证器的范围更改触发验证

Question

假设我们有一个自定义验证器，其输入作为属性的值。

app.directive('inputRequired', function() {
    return {
        require: 'ngModel',
        scope: {
            inputRequired: '='
        },
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.inputRequired = function(modelValue) {
                return !(scope.inputRequired && ctrl.$isEmpty(modelValue));
            };
        }
    };
});

在作用域中，我们定义一个变量和一个用于切换变量值的函数:

$scope.isRequired = false;

$scope.toggle = function() {
    $scope.isRequired = !$scope.isRequired;
};

然后我们创建一个表单，我们将在其中使用自定义验证器。我们还添加了一个按钮来调用切换功能。

<form>
    <input type="text" ng-model="someModel" input-required="isRequired"/>
    <button ng-click="toggle()">toggle</button>
</form>

这应该如何运作？当加载表单并初始化范围时，isRequired 的值将设置为 false。所以输入字段不是必需的。当我们单击切换按钮时，isRequired 的值更改为 true。但!尽管验证器作用域上的变量已更改，但不会触发验证。

重要提示:这只是一个示例。我知道 ng-required 指令，它实现了此功能。当验证器有输入并且字段的有效性取决于该输入时，我需要一个通用的解决方案。如果输入发生更改，则必须立即重新验证该字段。

Answer 1

刚刚找到了一个解决方案:在链接函数的作用域上添加一个观察器，并在 inputRequired 更改时调用 $validate:

app.directive('inputRequired', function() {
    return {
        require: 'ngModel',
        scope: {
            inputRequired: '='
        },
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.inputRequired = function(modelValue) {
                return !(scope.inputRequired && ctrl.$isEmpty(modelValue));
            };

            scope.$watch("inputRequired", function() {
                ctrl.$validate(); 
            });
        }
    };
});