javascript - AngularJS 指令模拟单选按钮

Question

我想构建一个模拟单选按钮行为的指令，如果您从外部控制单选按钮，这看起来相当微不足道，但我想这样做以便单选按钮能够控制自己。这意味着它们成为独立的代码位。

Angular 指令不是我的强项，但这是我到目前为止的想法:

HTML:

<test-radiobutton name="test" value="1" label="Testing" checked="false"></test-radiobutton>
<test-radiobutton name="test" value="2" label="Testing 2" checked="false"></test-radiobutton>

模板:

<div>
    <div class="test_radiobutton_box" ng-class="{'checked': checked}" ng-click="toggleChecked()"></div>
    <div class="test_radiobutton_label">{{ label }}</div>
</div>

还有 JS:

.directive("testRadiobutton", function() {
    return {
        restrict: "AE",
        scope: {
            label: "@label",
            name: "@name",
            value: "@value",
            checked: "=checked"
        },
        templateUrl: "../../test_components/test-radiobutton/test-radiobutton.html",
        controller: function ($scope) {
            $scope.toggleChecked = function () {
                $('test-radiobutton[name='+$scope.name+']').attr("checked", "false");

                $('test-radiobutton[name='+$scope.name+'][value='+$scope.value+']').each(function (index) {
                    $(this).attr("checked", "true");
                });
            };
        },
        link: function(scope, element, attributes){

        }
    };
});

问题是当您选择一个具有相同名称的新单选按钮时，其他单选按钮没有取消选择，jQuery 正确循环元素并找到其他元素(使用 .each() 测试)但没有t 切换它们的值。

显然我没有按照 Angular 的意图这样做，那么我该怎么做呢？

编辑 - 以反射(reflect)使用服务(仍然无法正常工作)

指令中的新 Controller 使用我的新单选按钮服务。

controller: function ($scope, RadioButtonService) {
    $scope.toggleChecked = function () {
        RadioButtonService.selectRadio($scope.name, $scope.value);
    };
},

还有我的服务:

angular.module("test_components.testRadiobutton.service", [])
.factory("RadioButtonService", function () {
    return {
        deselectAllRadios: function (radio_name) {
            $('test-radiobutton[name='+radio_name+']').each(function (index) {
                console.log("deselecting");
                angular.element($(this)).scope().checked = false;
            });
        },
        selectRadio: function (radio_name, radio_value) {
            this.deselectAllRadios(radio_name);
            $('test-radiobutton[name='+radio_name+'][value='+radio_value+']').each(function (index) {
                console.log('test-radiobutton[name='+radio_name+'][value='+radio_value+']');
                angular.element($(this)).scope().checked = true;
            });
        }
    };
});

控制台输出正确，使用 jQuery 手动引用元素也可以，但复选框值不会改变。

Answer 1

我知道有两种方法可以做到这一点。我推荐第一个。

1。创建服务

创建一个简单的工厂服务，它是您模块的一部分。让它管理您的单选按钮和单选按钮组。我建议在下一个方法中这样做。

2。其他元素的访问范围

您可以像这样访问另一个指令的范围:

angular.element($("#your-element")).scope();

您只需遍历所有选定的对象，然后访问范围并更改值。应该不会太难。