AngularJS转换嵌套指令

Question

我试图像这样创建一个角度指令：

<radio-button-group group="myGroup" label="My Group" data-model="myModel.attribute">
  <radio-button  id="value_1"  value="1">Value 1</radio-button>
  <radio-button  id="value_2"  value="2">Value 2</radio-button>
</radio-button-group> 

主要目标是重用并避免在每个<input type="radio" ng-model="myModel.attribute">重复ng-model和一般的代码重复。

我写了以下内容：

---

formjs.js

var formjsModule = angular.module('hp.formjs', []);

// Directive
formjsModule.directive('radioButtonGroup', function () {


  return {
    restrict: 'E',
    transclude: true,
    scope: {
      dataModel: '@',
      group: '@',
      label: '@?'

    },
    templateUrl: function (elem, attr) {
      return 'formjs/radio/radio-group-tpl.html';
    }

  }
}).directive('radioButton', function () {

  return {
    restrict: 'E',
    require: ['^radioButtonGroup'],
    transclude: true,
    scope: {
      value: '@',
      dataModel:'@',
      group: '@'
    },

    templateUrl: function (elem, attr) {
      return 'formjs/radio/radio-item-tpl.html';
    }

  }


});

---

formjs /收音机/无线电项-tpl.html

<input type="radio" name="{{group}}" id="{{group+'_'+id}}" ng-value="value" ng-model="dataModel"/>

---

formjs /收音机/无线电基的tpl.html            {{label}} m：{{dataModel}}

  <div class="col-sm-10" id="g_{{group}}" ng-transclude>
  </div>
</div>

我知道抄袭范围，但我没有看到这种绑定的优雅方式。

请帮助！

Answer 1

它必须是指令吗？这不够吗？

// HTML template
<div ng-repeat="option in options">
 <input type="radio" ng-model="$parent.selected" ng-value="option"> {{ option }}
</div>
...

// Controller
$scope.selected = null;
$scope.options = ['Radio one', 'Radio two', 'Radio three']; 

<小时/>

当然，如果你坚持，你可以把它作为指令。

HTML中的用法，options就是上面的数组。

<radio-group group-name="My group"
             ng-model="selected" 
             options="options"></radio-group>

实际指令

app.directive('radioGroup', function () {
  return {
    restrict: 'E',
    scope: {
      groupName: '@',
      options: '=',
      ngModel: '='
    },
    template: '<legend>{{ groupName }}</legend>' + 
              '<div ng-repeat="option in options">' + 
              '  <input type="radio" ' + 
              '         ng-model="$parent.ngModel" ng-value="option"> {{ option }}' + 
              '</div>'
  };
});