Angularjs 角度指令：绑定到父范围中的变量

角度指令演示：

功能控制（$范围）{
$scope.parval=0；
$scope.items=[
{id:1，文本：'1'}，
{id:2，文本：'2'}，
{id:3，文本：'3'}
];
}
A:1
2.
3.

angular.module（'myApp'，[]）
.directive（'item'，function（）{
返回{
限制：'E'，
替换：正确，
范围：{
参数：'='，
项目：'='
},
模板：“”+
“B:”+
“{i.text}}”+
'' +
''
};
});

现在：
单击所选的A1->B1
单击A2->B2选择项

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

我想要：
单击所选的A1->B1
单击A2->B2选择项

单击B1->A1选定项
单击B2->A2选择项

---

如何使用？

您使用的是原语，应该避免使用文字符号，因为ng repeat会创建一个新的作用域。下面的代码将解决您的问题

<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>

A:1
2.
3.
功能控制（$范围）{
$scope.parval={value:0}；
$scope.items=[
{id:1，文本：'1'}，
{id:2，文本：'2'}，
{id:3，文本：'3'}
];
}
angular.module（'myApp'，[]）
.指令（'项'，函数（）{
返回{
限制：'E'，
替换：正确，
范围：{
参数：'='，
项目：'='
},
模板：“”+
“B:”+
“{i.text}}”+
'' +
''
};
});

一种方法是使用$parent （ng model=“$parent.parval”）

angular.module（'myApp'，[]）
.directive（'item'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”+
“B:”+
“{i.text}}”+
'' +
''
};
});

为了将值从父组件传递到子组件，我们可以使用绑定：{text:'

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

<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>

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