0

$valid 値に基づいてフォーム要素に CSS クラスを設定するディレクティブがあります。ラジオボタンリストで使いたい。セットには複数のラジオ ボタンがありますが、ディレクティブを追加する必要があるのはそのうちの 1 つだけです。なぜなら、a) それらはすべて同じモデルを制御し、b) CSS は最終的にラジオ ボタン リストごとに 1 回だけ必要な単一のイメージ タグを明らかにするからです。 .

以下にいくつかの HTML を示します。

<div ng-app="myApp">
        <input required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
        <input add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>

脚本：

angular.module('myApp', []).directive('addValidationClass', function() {

    return {
        require: '^ngModel',
        link: function($scope, $element, $attrs, $ngModel) {

            if (!$ngModel) return;

            var update = function () {
                alert($ngModel.$dirty);
                $element
                    .removeClass()
                    .addClass($ngModel.$dirty ? ($ngModel.$valid ? 'valid' : '') : '');
            };

            $scope.$watch($attrs.ngModel, function (newValue, oldValue) {
                update();
            });
        }
    };

});

フィドル: http://jsfiddle.net/JqBgs/

クリックしたラジオボタンに関係なく、時計が更新されることをフィドルから確認できます。両方のラジオ ボタンが同じモデルを制御するため、これは私が予想したことです。ただし、左側のラジオ ボタンが汚れていないこともわかります。したがって、CSS クラスは適用されません。

汚れていないのはなぜ？

4

1 に答える 1

0

これをHTMLに入れました：

<div ng-app="myApp">
        <input ng-change="myForm.validateRadio.$dirty = true" required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
        <input name="validateRadio" add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>

Angular のばかげたバグです。

于 2013-07-17T09:39:02.700 に答える