Angular.js : ng-repeat 내부의 자식 컨트롤러에서 모델 변경 사항을 전파하는 방법

Question

각도 적용에서는 각 항목에 대해 ng-repeat 및 하위 컨트롤러를 사용하고 있습니다. 나는 또한 자동으로 데이터를 저장할 수 있도록 debounce를 사용하고있다. 그러나 문제는 데이터를 저장 한 후 (Restangular 사용) 변경 사항이 상위 노드의 배열로 다시 전파되지 않는다는 것입니다. 간단한 예제는 angular.copy을 사용하여 작동하지만 Restangular 및 해당 대체 (Restangular.copy) 문제는 정확히 같은 방식으로 작동하지 않습니다. 명시 적으로 항목을 배열의 오른쪽 인덱스로 설정하려고했지만 커서가 입력에 포커스를 잃게됩니다.

다음은 내 자식 컨트롤러 코드의 단순화 된 버전입니다. 및 here is a full JS Bin. 이 문제를 해결하기위한 또 다른 접근법이 있습니까?

<li ng-repeat='person in people track by $index' ng-controller='EditPersonController'> 

: 당신이 당신의 NG 반복에 "에 의해 트랙"을 추가하면

$scope.personCopy = angular.copy($scope.person); 

// Debounce and auto-save changes 
$scope.$watch('personCopy', function(newVal, oldVal) { 
    if (newVal && newVal != oldVal) { 
    if (timeout) $timeout.cancel(timeout); 
    timeout = $timeout(savePerson, 1000); 
    } 
}, true); 

var savePerson = function() { 
    // (In my real app, the following is inside a save callback) 
    // Method 1: (doesn't work at all) 
    $scope.person = $scope.personCopy 
    // Method 2: (works with angular.copy, but not Restangular.copy) 
    // angular.copy($scope.personCopy, $scope.person); 
    // Method 3: (works, but cursor loses focus) 
    // $scope.people[$scope.$index] = $scope.personCopy; 
}; 

Answer 1

당신을 위해 작동합니다

angular.extend($scope.person, $scope.personCopy); 

대신

$scope.person = $scope.personCopy; 

Answer 2

방법 3 시도 여기 그 일 : http://jsbin.com/jitujaro/3/edit

people을 업데이트하면 현재 ngRepeat이 다시 작성되는 DOM이 포커스를 잃는 이유입니다. 그래서 초점이 있던 요소는 없어졌습니다. track by Angular를 사용하는 경우 해당 DOM 요소를 다시 만들 필요가 없습니다.

방법 1과 2가 작동하지 않는 이유는 Javascript의 프로토 타입 상속입니다. 상위 범위에있는 변수에 쓰면 해당 변수의 새로운 로컬 복사본이 로컬 범위에서 만들어집니다. 그러나 방법 3에서와 같이 부모 범위에있는 개체의 속성에 쓸 때 부모 개체에서 쓰기가 예상대로 발생합니다.