angularjs - 以角度向自定义指令添加表单验证

Question

我知道这个问题之前已经被问过，但我不知道如何将答案应用到我的问题中。我有一个角度的三态布尔指令，我不确定如何向指令添加验证状态，以便表单可以看到我的值是有效的（不是空的）

app.directive('customBoolean', function(){
    return {
    restrict: 'E',
    replace: true,
    scope: {
        boolValue: '=',
        required: '@'
    },
    template: '<button class="btn btn-default btn-xs" ng-click="toggle()" style="width: 70px">{{ boolValue | bool_to_string }}</button>',
    controller: function ($scope, $element){

    $scope.toggle = function(){
        if ($scope.boolValue == null)
        { $scope.boolValue = true; }
        else if ($scope.boolValue == true)
        { $scope.boolValue = false; }
        else { $scope.boolValue = $scope.required ? true  : undefined; }
    };
  }
 }
});

下面是我到目前为止所拥有的 plnkr 链接。有人有想法么？

plnkr 链接

Answer 1

使用 ngModel 而不是 boolValue。require指令中的 ngModel，然后使用 $setValidity 设置有效性。

app.directive('customBoolean', function(){
return {
restrict: 'E',
require : 'ngModel'
replace: true,
scope: {
    boolValue: '=',
    required: '@'
},
template: '<button class="btn btn-default btn-xs" ng-click="toggle()" style="width: 70px">{{ boolValue | bool_to_string }}</button>',
link: function ($scope, $element,$attrs,ngModel){
if (//your invalid conditions){
  ngModel.$setValidity(attrs.ngModel,true/false);
}
$scope.toggle = function(){
    if ($scope.boolValue == null)
    { $scope.boolValue = true; }
    else if ($scope.boolValue == true)
    { $scope.boolValue = false; }
    else { $scope.boolValue = $scope.required ? true  : undefined; }
};
}}});