Javascript AngularJS-作用域属性

我把这个HTML保存在一个文件中

HTML:

<!-- radio button 1 -->
<input type="radio" name="radio1" id="radio-group1" ng-model="radio1" value="group1">
<input type="radio" name="radio1" id="radio-group2" ng-model="radio1" value="group2">

<!-- radio button 2 -->
<input type="radio" name="radio2" id="radio-group3" ng-model="radio2" value="group3">
<input type="radio" name="radio2" id="radio-group4" ng-model="radio2" value="group4">
<input type="radio" name="radio2" id="radio-group5" ng-model="radio2" value="group5">

这是我使用属性无线电控件的HTML

它工作得很好。但是如果我复制整个HTML，如果我点击任何可用的单选按钮。把手内的radio1或radio2将更新所有跨度

我知道我们需要在范围内比赛。但我不明白它是什么，如何工作，如何让它工作

---

为了更好地理解。

您必须在指令中定义一个独立的作用域，才能不更改全局作用域

在范围中使用两个不同的对象：

<div class="controller">
<p>
  <form>
    <radio-controls group1="d1.group1" group2="d1.group2"></radio-controls>
  </form>  
  <br />
  <span>Group 1 Value : {{ d1.group1 }}</span>
  <br>
  <span>Group 2 Value : {{ d1.group2 }}</span>
</p>
<p>
  <form>
    <radio-controls group1="d2.group1" group2="d2.group2"></radio-controls>
  </form>
  <br />
  <span>Group 1 Value : {{ d2.group1 }}</span>
  <br>
  <span>Group 2 Value : {{ d2.group2 }}</span>
</p>
</div>

并使用模板中的指令范围：

<!-- radio button 1 -->
<input type="radio" name="name" id="radio-group1" ng-model="group1" value="radio1">Radio 1
<input type="radio" name="name" id="radio-group2" ng-model="group1" value="radio2">Radio 2


<!-- radio button 2 -->
<input type="radio" name="name2" id="radio-group3" ng-model="group2" value="radio3"> Radio 3
<input type="radio" name="name2" id="radio-group4" ng-model="group2" value="radio4"> Radio 4
<input type="radio" name="name2" id="radio-group5" ng-model="group2" value="radio5"> Radio 5

---

Plunker:

了解我正在查看的angulars文档。但我不太清楚。你能帮我吗？直接链接：我有大约n个组要创建。我将无法通过添加d1和d2来重复我自己，使其在所有组中都是唯一的。我在孤立的范围内挖了一点。我学了一点，但这些知识还不足以让它充满活力。但用数组和ng repeat代替。问题中未指定。我的模板是html文件。我怎么能用ng repeat呢？

<div class="controller">
<p>
  <form>
    <radio-controls group1="d1.group1" group2="d1.group2"></radio-controls>
  </form>  
  <br />
  <span>Group 1 Value : {{ d1.group1 }}</span>
  <br>
  <span>Group 2 Value : {{ d1.group2 }}</span>
</p>
<p>
  <form>
    <radio-controls group1="d2.group1" group2="d2.group2"></radio-controls>
  </form>
  <br />
  <span>Group 1 Value : {{ d2.group1 }}</span>
  <br>
  <span>Group 2 Value : {{ d2.group2 }}</span>
</p>
</div>

App.directive('radioControls', [function() {

return {

    restrict: 'E',
    scope: {
      group1: '=',
      group2: '='
    },
    templateUrl: 'radio-controls-template.html',
    controller: ['$scope', function($scope) {
        $scope.radio1= 'group1';
        $scope.panelStyle = 'group4';
    }]
}

}])

<!-- radio button 1 -->
<input type="radio" name="name" id="radio-group1" ng-model="group1" value="radio1">Radio 1
<input type="radio" name="name" id="radio-group2" ng-model="group1" value="radio2">Radio 2


<!-- radio button 2 -->
<input type="radio" name="name2" id="radio-group3" ng-model="group2" value="radio3"> Radio 3
<input type="radio" name="name2" id="radio-group4" ng-model="group2" value="radio4"> Radio 4
<input type="radio" name="name2" id="radio-group5" ng-model="group2" value="radio5"> Radio 5