Angular directive: bind to variable in parent scope

Question

Angular directive demo:

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

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?

oori · Accepted Answer · 2013-11-28 12:21:49Z

5

One way is to use $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>'
    };
});

answered Nov 28, 2013 at 12:21

oori

5,7411 gold badge33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ajay Singh Beniwal · Accepted Answer · 2013-11-28 12:18:54Z

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>&nbsp;' +
            '</span>' +
        '</div>'
    };
});
    </script>

for passing value from parent to child component we can use bindings: { text: '<' }, but what needs to be done for child to parent? (tet will show to child from parent)

Collectives™ on Stack Overflow

Angular directive: bind to variable in parent scope

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related