AngularJS - 范围属性

Question

我已将此 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">

我已经创建了一个指令。

Javascript：

App.directive('radioControls', [function() {
    return {    
        restrict: 'A',
        templateUrl: 'radio-controls-template.html',
        controller: ['$scope', function($scope) {
            $scope.radio1= 'group1';
            $scope.panelStyle = 'group4';
        }]
    }

}])

这是我使用属性 radio-controls 的 HTML。

<div class="radio-buttons-div" radio-controls>      
</div>    
<span>{{ radio1 }}</span>
<span>{{ radio2 }}</span>

它工作正常。但是，如果我复制整个 HTML 并且单击任何可用的单选按钮。所有跨度都会更新，其中车把内的radio1 或radio2。

我知道我们需要在范围上发挥作用。但我不明白它是什么、如何工作或如何使其工作。

Plunker 以便更好地理解。

Answer 1

你必须在你的指令中定义一个独立的范围，才能不改变全局范围。

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

<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

Plunker：http://plnkr.co/edit/yNVDMe?p=preview