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

AngularJS - Scope属性

1 个答案: