Question

我有一个指令，可以创建一个评级控件和点击率。我不想提交没有用户评级的表单需要验证我不知道如何使用angularjs。

<div jb-rating ng-model="question.answer"  
    rating-value="question.answer" max="5" 
    on-rating-selected="question.answer" 
    read-only="false">
</div>

这样我使用了该指令但无法添加所需的验证。

演示代码位于以下链接：http://plnkr.co/edit/XZAoCYz1eyC9ulC735zS?p=preview

Answer 1

这是自定义控件的一个非常好的案例，在NgModelController文档（ref）的开头记录。您必须进行多项更改，但效果很好：http://plnkr.co/edit/4hq1L5scjnQWvE6WaFyx

让我们回顾一下这些变化：

使用ng-model。一些子变化：

从隔离的范围和HTML中删除rating-value。这是多余的。

require指令定义对象中的ngModel。

  return {
      restrict: 'A',
      require: 'ngModel',      // ONE CHANGE IS HERE
      template: '<ul class="rating">' + ...,
      ...
      link: function (scope, elem, attrs, ngModel) { // ANOTHER HERE
          ...
      }
  };

使用ngModel.$modelValue代替scope.ratingValue：

var updateStars = function() {
    scope.stars = [];
    for (var  i = 0; i < scope.max; i++) {
        scope.stars.push({filled: i < ngModel.$modelValue}); // CHANGE HERE
    }
};

现在为自定义控件（ngModel函数）实现$render“界面”，并调用$setViewValue()更新模型：

ngModel.$render = function() {
    updateStars();  // AS SIMPLE AS THAT!
};

scope.toggle = function(index) {
    ...
    ngModel.$setViewValue(index + 1);
    ...
};

对于“必需”验证，您现在可以与Angular的ng-required一起玩。只要“覆盖”ngModel.$isEmpty()你认为零为空，除了Angular认为是空的（例如null）：
```
var originalIsEmpty = ngModel.$isEmpty; // KEEP ORIGINAL TO FALL BACK
ngModel.$isEmpty = function(value) {
    return value === 0 || originalIsEmpty.call(ngModel,value);
};
```

当然，将ng-disabled条件添加到提交按钮：

<button type="submit" class="..."
    ng-disabled="questionForm.$invalid">Submit</button>

顺便说一下，你的readonly规范有一个错误。范围属性为readonly，但HTML属性中有一个短划线：read-only。无论如何，你不再需要这个了，你有ng-required。

验证angularjs中的rating指令

1 个答案: