교체 할 때 각형 모델이 업데이트되지 않음

Question

This Plunkr은 내가 문제가있는 것을 보여줍니다.

대화 상자와 상위 페이지 모두에 표시되는 배열이 있습니다. 대화 상자의 범위 내에서 배열을 수정해도 문제가 없지만 배열을 완전히 바꿀 때 변경 내용은 대화 상자의 범위 내에서만 표시됩니다. 왜 그런가요? Plunkr이 그것을 먹는 경우

내 코드 :

angular.module('app', ['ui.bootstrap']) 
    .controller('demoController', function($modal) { 
    var vm = this; 

    vm.message = 'Binding Problems'; 
    vm.list = [1,2,3]; 

    vm.modal = function() { 
     $modal.open({ 
     controller: 'modalController as vm', 
     templateUrl: 'modal.html', 
     resolve: { 
      list: function() { 
      return vm.list; 
      } 
     } 
     }); 
    }; 
    }) 
    .controller('modalController', ['$modalInstance', '$scope', 'list', 
    function($modalInstance, $scope, list) { 
     var vm = this; 

     vm.list = list; 
     vm.modalText = 'Modal Text'; 

     vm.cancel = function() { 
     $modalInstance.dismiss(); 
     }; 
     vm.clear = function() { 
     vm.list = []; // This does not propagate to the parent controller... 
     }; 

     vm.add = function() { 
     vm.list.push(4); // ...but this does. 
     }; 

    } 
    ]); 

UPDATE :Plunkr has been updated 좋아, 내가 지금 가고 있지만 어떻게 내 코드에서 문제를 해결하는 방법 무엇을 이해합니다. 실제 코드에서는 데이터를 AJAX 호출의 결과로 바꿉니다. 이 경우에 몇 가지 옵션이 있다고 가정합니다. vm.list.length = 0, push() AJAX 호출에서 반환 된 각 항목을 보내지 만 무시 무시하게 비효율적 인 것 같습니다. 어떻게 이런 일이 일반적으로 이루어 집니까? 대신 clear() 방법으로 배열을 다시의

Answer 1

당신이 모달의 범위에 의해 배열 기준치 도움을 덮어 쓰기 때문에 그것은이다 새로운 배열 인스턴스.

vm.clear = function() { 
    vm.list = []; // This does not propagate to the parent controller... 
    }; 

대신 명확한 배열 모달 컨트롤러의 범위는 여전히 부모 컨트롤러와 동일한 기준 보유하도록 -에 따라

vm.clear = function() { 
    vm.list.splice(0, vm.list.length); //or vm.list.length = 0; 
    }; 

Demo

---

업데이트하여 실제 문제 : -

겹쳐 쓰기로 새로 고쳐야하는 데이터를 실제로 공유하려는 경우 모달 범위에서 수정 될 배열이 포함 된 객체 참조를 상위 항목에서 확인하십시오.

예 : - 부모 컨트롤러에서

: -

vm.data = {list : [1,2,3];}; 

하고 해결 : - 모달에서

resolve: { 
     data: function() { 
     return vm.data; 
     } 
    } 

: -

를 주입 데이터 사용 : -

.controller('modalController', ['$modalInstance', '$scope', 'data', 
         function($modalInstance, $scope, data) { 

Plnkr

이 확실히 모두 컨트롤러가 자식 속성 참조 변경하면이를 다른 측면에 반영되는 것을 확인할 경우에도 동일한 기본 객체 참조를 공유 할 것입니다.

모달 약속 체인을 사용하여 모달에서 컨테이너 컨트롤러로 데이터를 전파 할 수있는 또 다른 방법이 있습니다. 당신이 경우

vm.cancel = function() { 
    $modalInstance.close(vm.list); //<-- Pass data 
    }; 

Plnkr

Answer 2

그냥 빈 :

vm.clear = function() { 
    vm.list.length = 0; 
}; 

here이 작업 plunker