angular js 中单选按钮的自定义指令

Question

在 angular js

中为单选按钮创建自定义指令

到目前为止我试过了

HTML:

  <my-raido></my-raido>
  <my-raido></my-raido>
  <my-raido></my-raido>

Angular js:

var App = angular.module('myRaido',[]);

App.directive('myRaido',function() {

    return {
        restrict : 'E',
        template:  '<div class="myClass"><input type="radio"></div>',
        replace:true,
        link:function (scope, element, attrs) {

            element.click(function () {
                console.log("clicked....");
                // body...
            });

            console.log("link should be work as per our expections...", + attrs.valve);
        }
    }
});

提前致谢

Answer 1

var App = angular.module('myRaido',[]);

App.directive('myRaido',function() {

return {
    restrict : 'E',
    template:  '<div class="myClass"><input type="radio" name='fooRadios'></div>',
    replace:true,
    link:function (scope, element, attrs) {

        element.click(function () {
            console.log("clicked....");
            // body...
        });

        console.log("link should be work as per our expections...", + attrs.valve);
    }
  }
});

Answer 2

您应该在单选元素上设置 name 属性，使它们成为组的一部分。

angular.module('app', [])
.directive('myRadio', function() {
    return {
        restrict : 'E',
        template:  '<div class="myClass">\
                      <label>\
                        <input type="radio">\
                        <span></span>\
                      </label>\
                    </div>',
        replace: true,
        link: function (scope, element, attrs) {
            var $radio = element.find('input');
            var $span = element.find('span');

            $radio.attr('name', attrs.group);
            $span.html(attrs.label);
        }
    }
});

如果多个输入[单选]控件具有相同的名称，它们将作为一个组运行。

您可以像这样使用此指令：

<my-radio group="group1" label="Option1"></my-radio>
<my-radio group="group1" label="Option2"></my-radio>
<my-radio group="group1" label="Option2"></my-radio>

angular js 中单选按钮的自定义指令

custom directive for radio buttons in angular js

angularjs

angularjs-directive