Angular directive: bind to variable in parent scope
angularjs, angularjs-directive, angularjs-scope
Solution
You are using primitive which you should avoid instead use literal notation because ng-repeat create a new scope . The below code will solve your problem
<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> ' +
'</span>' +
'</div>'
};
});
</script>
Problem
Angular directive 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> ' + '</span>' + '</div>' }; }); ``` Now: Click A1 -> B1 selected Click A2 -> B2 selected Click B1 -> A1 not changed Click B2 -> A2 not changed I want: Click A1 -> B1 selected Click A2 -> B2 selected Click B1 -> A1 selected Click B2 -> A2 selected How?