Question

我想构建一个模拟单选按钮行为的指令，如果你在外部控制单选按钮，这似乎相当微不足道，但我想这样做，以便单选按钮控制自己。这意味着它们成为自包含的代码。

Angular Directives不是我的强项，但这是我到目前为止所提出的：

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（）测试但是没有'切换他们的价值观。

显然我不是这样做Angular的意图所以我该如何做？

编辑 - 反映使用服务（仍无效）

指令中的新控制器使用我的新单选按钮服务。

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();

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

Answer 2

我最终让指令接受单选按钮的对象，然后我使用ng-repeat来渲染它们，这使得我的指令控制器可以访问所有的无线电，从那时起，这是一个简单的使用点击的情况button的$ index用于切换$ scope.radios [i] .isChecked值，具体取决于是否是单击的值。

这种方法非常简单，不知道为什么我以原来的方式尝试过它。

AngularJS指令模拟单选按钮

2 个答案:

1。创建服务

2。访问其他元素的范围