角度 - $ indexをカスタムディレクティブに渡すにはどうすればいいですか？

Question

私はangularを使ってコレクションを繰り返し、いくつかのカスタムディレクティブradioボタンを使って作成します。クリックした\ checked \ selected radioボタンに特定のクラスを追加したいと思います。 $indexをデータオブジェクトとともにdirectiveに渡すにはどうすればよいですか？

これは指令である：

app.directive("customDirective", function() { 
    return { 
     restrict: "E", 
     templateUrl: "views/customDirective.html", 
     scope: { 
      choice: "=" 
     } 
    } 
}); 

このコードはディレクティブにデータオブジェクトを渡し：

<div class="row" ng-repeat="choice in questionObj.choices"> 
    <custom-directive choice="choice"></custom-directive> 
</div> 

これはディレクティブテンプレートの内臓である：

<div class="radio"> 
    <label ng-class="{choiceSelected: isChecked == $index}"><input type="radio" name="optradio" ng-model="isChecked" value="$index">{{choice.description}}</label> 
</div> 

Answer 1

ない限り私はラジオとチェックボックスの周りの指示を使用することを避けなければならないこれらのオブジェクトとng-repeatのスコープあなたはディレクティブを一掃し、ちょうどにそのHTMLを入れた場合はNG-繰り返し、それは次のように動作します。 HTML：

<div class="row" ng-repeat="choice in questionObj.choices"> 
    <div class="radio"> 
    <label ng-class="{choiceSelected: selected == choice.description}"> 
     <input type="radio" name="{{choice.description}}" ng-model="$parent.selected" ng-value="choice.description"> 
     {{choice.description}} 
    </label> 
</div> 

コントローラー：

.controller('testData', ['$scope', 
    function ($scope) { 

     $scope.selected = {}; 

     $scope.questionObj = { 
      choices:[{description: 'first'},{description:'second'},{description:'third'}] 
     }; 

    }]) 

CSS：ここ

.choiceSelected{ 
    color:red; 
} 

https://plnkr.co/edit/JL9WOkYjRyoTLi5E7ExF?p=preview

また、ngリピートで、ラジオのngモデルは$ parent.selectedです。これは、ng-repeatが内部htmlを元のスコープの子にするためです。