chỉ thị góc: bind để biến trong phạm vi mẹ

Question

góc thị bản demo:

jsfiddle

<div ng-app="myApp"> 
<script> 
    function Contrl($scope){ 
     $scope.parval = 0; 
     $scope.items = [ 
      {id: 1, text: '1'}, 
      {id: 2, text: '2'}, 
      {id: 3, text: '3'} 
     ]; 
    } 
</script> 
<div ng-controller="Contrl"> 
    A: <input type="radio" value="1" ng-model="parval">1</input> 
    <input type="radio" value="2" ng-model="parval">2</input> 
    <input type="radio" value="3" ng-model="parval">3</input> 
    <item parval="parval" items="items"></item> 
</div> 

angular.module('myApp', []) 
.directive('item', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      parval: '=', 
      items: '=' 
     }, 
     template: '<div>' + 
     'B: <span ng-repeat="i in items">' + 
       '<input value="{{i.id}}" type="radio" ng-model="parval">{{i.text}}</input>&nbsp;' + 
      '</span>' + 
     '</div>' 
    }; 
}); 

Bây giờ là:
Bấm A1 -> B1 chọn
Bấm A2 - > B2 được chọn

Bấm B1 -> A1 không thay đổi
Bấm B2 -> A2 không thay đổi

Tôi muốn:
Bấm A1 -> B1 chọn
Bấm A2 -> B2 chọn

Bấm B1 -> A1 được chọn
Nhấp B2 -> A2 được chọn

Làm cách nào?

Answer 1

Bạn đang sử dụng nguyên thủy mà bạn nên tránh thay vì sử dụng ký hiệu chữ vì ng-lặp lại tạo phạm vi mới. Mã dưới đây sẽ giải quyết vấn đề của bạn

<div ng-controller="Contrl"> 
    A: <input type="radio" value="1" ng-model="parval.value">1</input> 
    <input type="radio" value="2" ng-model="parval.value">2</input> 
    <input type="radio" value="3" ng-model="parval.value">3</input> 
    <item parval="parval" items="items"></item> 
</div> 
    <script> 
     function Contrl($scope) { 
      $scope.parval = { value: 0 }; 
      $scope.items = [ 
       { id: 1, text: '1' }, 
       { id: 2, text: '2' }, 
       { id: 3, text: '3' } 
      ]; 
     } 
     angular.module('myApp', []) 
.directive('item', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      parval: '=', 
      items: '=' 
     }, 
     template: '<div>' + 
     'B: <span ng-repeat="i in items">' + 
       '<input value="{{i.id}}" type="radio" ng-model="parval.value">{{i.text}}</input>&nbsp;' + 
      '</span>' + 
     '</div>' 
    }; 
}); 
    </script> 

Answer 2

Một cách là sử dụng $ mẹ (ng-mô hình = "$ parent.parval")

angular.module('myApp', []) 
.directive('item', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<div>' + 
     'B: <span ng-repeat="i in items">' + 
       '<input value="{{i.id}}" type="radio" ng-model="$parent.parval">{{i.text}}</input>&nbsp;' + 
      '</span>' + 
     '</div>' 
    }; 
});