angularjs - Angular 指令 : bind to variable in parent scope

Question

Angular 指令演示:

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>'
    };
});

现在:
单击 A1 -> B1 选择
单击 A2 -> B2 选择

单击 B1 -> A1 未更改
单击 B2 -> A2 未更改

我想要:
单击 A1 -> B1 选择
单击 A2 -> B2 选择

单击 B1 -> A1 选中
单击 B2 -> 选择 A2

如何？

Answer 1

一种方法是使用 $parent
(ng-model="$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>'
    };
});