0

我正在尝试创建一个简单的指令，我可以将其应用于现有的无线电输入以使其可取消选择...它不太有效，因为该指令没有正确跟踪先前单击的值。目标是将单选设置为“真”、“假”，或者如果当前选择的值与前一个相同，则为空（例如，单击“真”两次将取消设置单选并将模型值设置为空）。它似乎不断忘记设置为未定义的先前值。我想我可能会提出某种范围界定问题，但我不确定。

这是指令：

angular.module('App').directive('deselectableRadio', function() {
    return {
        restrict: 'A',
        scope: {
            model: '=ngModel'
        },
        link: function(scope, element, attr) {
            var previousValue = angular.copy(scope.model);
            element.bind('click', function(e) {
                determineState(element[0]);
            });
            function determineState(elem) {
                if (elem.checked && elem.value == previousValue) {
                    elem.checked = false;
                    scope.model = null;
                }
                previousValue = angular.copy(scope.model);
            }
        }
    }
});

这是HTML：

<div class="app-radio">
    <input type="radio" name="toggle" id="toggle-yes" value="true"
           ng-model="props['toggle']" deselectable-radio>
    <label for="toggle-yes">Yes</label>
</div>
<div class="app-radio">
    <input type="radio" name="toggle" id="toggle-no" value="false"
           ng-model="props['toggle']" deselectable-radio>
    <label for="toggle-no">No</label>
</div>
4

1 回答 1

1

该指令与 ng-model 控制器作斗争。

使用ngModelController API代替创建隔离范围和双向绑定到ng-model属性。

演示 

angular.module('app',[])
.directive('deselectableRadio', function() {
    return {
        restrict: 'A',
        scope: false,
        //scope: {
        //    model: '=ngModel'
        //},
        require: "ngModel",
        link: function(scope, element, attrs, ctrl) {
            element.on('click', function(e) {
                if (attrs.value == ctrl.$viewValue) {
                  ctrl.$setViewValue(null);
                  ctrl.$render();
                }
            });
        }
    };
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <div class="app-radio">
        <input type="radio" name="toggle" id="toggle-yes" value="true"
               ng-model="props['toggle']" deselectable-radio>
        <label for="toggle-yes">Yes</label>
    </div>
    <div class="app-radio">
        <input type="radio" name="toggle" id="toggle-no" value="false"
               ng-model="props['toggle']" deselectable-radio>
        <label for="toggle-no">No</label>
    </div>
    <br>
    model = {{props.toggle || 'null'}}
</body>

于 2019-09-09T18:21:43.677 回答