AngularJS: Prevent changes in parent scope until Save operation is performed in modal

Standard

It happens usually when ever you are using ng-repeat in parent page and pass that row data to Modal for editing purpose, any changes made in modal is reflected directly in parent page grid without saving the modal updated data.

2016-02-18 09_01_34-HomePage

As you can see I am changing Course name and it is reflected directly in grid at main page.

Solution:

What you would need is to clone your model, prior to showing your edit modal, and when a user clicks on closeModal() you would reassign your model to the cloned value.

function DialogController($mdDialog, courseData) {
 
            var vmPop = this;
            initPopUp();
 
            function initPopUp() {
                vmPop.course = [];
                if (courseData)
                    vmPop.course = angular.copy(courseData);
            }
  }

As you can see I am passing courseData to dialog modal controller, before assigning it to modal scope variable (vmPop.course), I am creating a copy of source, which is an object and then assigning it to vmPop.course variable.

Angular Docs for angular.copy

Advertisements

One thought on “AngularJS: Prevent changes in parent scope until Save operation is performed in modal

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s