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之前运行。有没有办法在ng-repeat之前运行replace=true？

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>

EDIT 可替代地

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/

ng-repeat影响错误的地方

2 个答案: