AngularJS two way data binding in directive not working

Question

I have a directive that updates a bound property, but it never seems to update the original property!

directives.directive('recordVideo', [function () {
    return {
        scope: {
            showRecordVideo: '='
        },
        controller: "recordVideoController as ctrl",
        templateUrl: '/views/recordvideo.html'
    };
}]);

<record-video data-show-record-video="showAddScheduleDialog"></record-video>

When I set $scope.showAddScheduleDialog = true in the parent controller, the directive sees the change and shows the dialog. When the dialog itself sets its property $scope.showRecordVideo = false the bound property on the parent controller showAddScheduleDialog never updates!

Why is this?

I have tried putting $scope.$watch on both the parent controller and the directive. The changes only propogate down to the directive and never back up to the controller!

Please go through this. You will get what you are missing currently... — road2victory
– road2victory, Commented Sep 2, 2015 at 12:02

Community · Accepted Answer · 2017-05-23 11:44:03Z

1

The problem is caused by javascript prototype inheritance (the long answer). The usual hack is to change a property inside:

This stays the same:

scope: {
    showRecordVideo: '='
},

In controller:

$scope.showRecordVideo = {
    state: true
};

In modal:

$scope.showRecordVideo.state = false;

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Sep 2, 2015 at 11:42

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Collectives™ on Stack Overflow

AngularJS two way data binding in directive not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related