ng-repeat影响错误的地方

Question

我在AngularJS中编写了一个名为fRadioButton的自定义指令。据我所知，ngRepeat指令会影响使用它的标签。然而，就我而言，ngRepeat的行为很奇怪。以下是详细信息：

我的指令模板：

<label>
        <input type="radio" value="fValue"/>
        {{fName}}
</label>

我的指令的 JavaScript 文件：

directivesModule.directive('fRadioButton', function() {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
          fName: '@',
          fValue: '='
        },
        transclude: false,
        templateUrl: '/directives/f-radio-button.html'
    };
});

我从任何页面使用该指令，如下所示：

<f-radio-button ng-repeat="period in myCtrl.periods track by $index" 
    f-name="period.name" f-value="{{$index}}""></f-radio-button>

根据ngRepeat，我希望生成的HTML采用以下格式：

<label></label>
<label></label>
<label></label>
<label></label>

但是，它按如下方式生成：

<label>
    <f-radio-button></f-radio-button>
    <f-radio-button></f-radio-button>
    <f-radio-button></f-radio-button>
    <f-radio-button></f-radio-button>
</label>

如何使用ngRepeat直接复制标签标签？我已经用replace=false试过了，但它也没有用。

我猜replace=true在ng-repeat之前运行.有没有办法在replace=true之前运行ng-repeat？

Answer 1

您可以将数组传递到指令中，并在其中呈现无线电项：

.directive('fRadioButton', function() {
  return {
    restrict: 'EA',
    replace: true,
    scope: {
      model: '=ngModel',
      options: '=',
      fName: '@',
      fValue: '@'
    },
    template: function(element, attrs) {
      return '<div> {{model}}' + 
        '<label ng-repeat="option in options">' +
        '  <input type="radio" ng-model="$parent.model" ng-value="{{ option.' + attrs.fValue + ' }}" name="' + attrs.name + '" />' +
        '  {{option.' + attrs.fName + '}}' +
        '</label></div>'  
    } 
  };
});

然后你可以像这样使用它：

<f-radio-button options="myCtrl.periods" ng-model="selected" f-name="name" f-value="id"></f-radio-button>

这是一个简单的演示：

演示：http://plnkr.co/edit/Xcvt46ljV58513saq7BC?p=info

Answer 2

ng-repeat重复您附加到的元素中的所有内容

<div ng-repeat="period in myCtrl.periods track by $index">
    <f-radio-button f-name="period.name" f-value="{{$index}}"></f-radio-button>
</div>

编辑或者

myApp.directive('fRadioButtons', function() {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            periods: "="
        },
        template: '<label ng-repeat="period in periods"><input type="radio" f-name="{{period.name}}" value="{{$index}}"/>{{period.name}}</label>'
    };
});
function MyCtrl($scope) {
    $scope.periods = [{name: "foo"}, {name: "bar"}, {name: "foobar"}];
}

http://jsfiddle.net/Lvc0u55v/3010/