Passed value still edited after cancel angular mddialog

Question

I pass a value to my mdDialog controller to edit the content in a modal, but of the user cancels the modal no adjustments can be saved, but still if I change to content within the modal, I see the changes happening on the list behind (on the parent view) and when I cancel the modal, the changes aren't undone. The option bindToController is set to true, so a copy should be passed instead of a reference.

vm.editFaq = function   (faqToEdit, ev){

     var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && vm.customFullscreen;

    $mdDialog.show({
        controller: 'editFaqController'
        , controllerAs: 'dvm'
        , templateUrl: './app/components/faq/modals/editFaq.html'
        , parent: angular.element(document.body)
        , targetEvent: ev
        , clickOutsideToClose: true
        , fullscreen: useFullScreen
        , locals: { faq : faqToEdit }
        , bindToController: true
    }).then(function(result){
        if(result){
            _.findWhere(vm.allFaqs, { _id: faqToEdit._id }) = result;
        }
    });

    $scope.$watch(function () {
        return $mdMedia('xs') || $mdMedia('sm');
    }, function (wantsFullScreen) {
        $scope.customFullscreen = (wantsFullScreen === true);
    });
};

So when to modal is hidden, the "then" promise is called and the adjustments can be committed.

Use **angular.copy** when assigning value of object or array to another variable and that object value should not be changed refer from http://stackoverflow.com/questions/33043850/why-and-when-to-use-angular-copy-deep-copy. — Abdullah, May 18 '16 at 09:14

score 1 · Accepted Answer · answered May 19 '16 at 21:40

1

I used angular.copy, a friend told me that even with bindToController, or what ever other option of mdDialog that said to work always passes a reference of the object.

answered May 19 '16 at 21:40

user1008531

491
2
8
17

score 0 · Answer 2 · answered May 18 '16 at 08:27

you can solve like that:

     vm.editFaq = function   (faqToEdit, ev){

 var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && vm.customFullscreen;

          faqToEdit = angular.copy(faqToEdit);

          $mdDialog.show({
            controller: 'editFaqController',
            controllerAs: 'dvm',
            templateUrl: './app/components/faq/modals/editFaq.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose: true,
            fullscreen: useFullScreen,
            locals: {
              faq: faqToEdit
            },
            bindToController: true
          }).then(function(result) {
            if (result) {
              _.findWhere(vm.allFaqs, {
                _id: faqToEdit._id
              }) = result;
            }
          });

        }

Passed value still edited after cancel angular mddialog

2 Answers2