2014-02-06 2 views
7

자동 저장 기능이있는 필드가 많은 모델의 편집기를 구현하려고합니다.

모델은 json이고 $ resource로로드되고 범위에 직접 사용됩니다.

MyModelResource = $resource(config.api4resource + 'models/:id', {id:'@_id'}); 
$scope.myModel = MyModelResource.get({id: xxxx}); 

문제 # 1 : 실제 자동 저장 구현. 각 텍스트 필드에 대해 내가 뭐하는 거지 :

HTML :

<input type="text" ng-model="myModel.someField" ng-blur="save()" ng-change="dirty()"> 

컨트롤러는 각 NG 변화에 저장하는 것은

$scope.dirty = function() { 
    $scope.dirtyFlag = true; 
    console.log('Marking dirty!'); 
}; 

$scope.save = function(force) { 

    if (!$scope.dirtyFlag && !force) { 
     return; 
    } 
    $scope.dirtyFlag = false; 
    console.log('Saving!'); 
    $scope.myModel.$save(); 
} 

생각이된다 너무 비싸, 내가 원하지 않는 것처럼 사용자 유형으로 모든 문자에 대해 서버를 친다. 그래서 ng-change()는 내 컨트롤러에서 "더러운"플래그를 표시하고, ng-blur로 필드에서 벗어나면 플래그를 확인하고 상태가 더러운 경우에만 을 저장합니다. 사용자가 텍스트 필드를 수정했지만 다른 필드로 이동하지 않은 경우와 같이 여전히 모든 경우를 다루지는 않습니다. 어쨌든 저장할 수 있도록 dirty() 내에서 save()에 대한 타이머를 예약하는 옵션이 있지만 이는 나에게 우아한 해결책이 아닙니다 (https://stackoverflow.com/a/21137079/1076865에서 가져온 타이머 코드)

$scope.dirty = function() { 
    $scope.dirtyFlag = true; 
    console.log('Marking dirty!'); 

    if (savePromise) { 
     $timeout.cancel(savePromise); 
    } 

    savePromise = $timeout(function() { 
     savePromise = null; 
     $scope.save(); 
    }, 500); 
}; 

이 문제를 해결하는 일반적인 방법은 무엇입니까?

문제 # 2 : 내 저장 코드가 실제로 실행되면 myModel. $ save() 함수를 호출합니다. 이것은 결국 서버에 POST 요청을 보내고, 서버는이를 DB에 저장하고 응답과 동일한 모델로 응답합니다.

여기에 문제가 있습니다. myModel을 다시로드하면 웹 페이지의 일부분이 리플 로우되어 포커스가 손실됩니다. 따라서 사용자가 무언가를 입력하고 다음 필드로 이동하기 위해 Tab을 누른 경우 잠시 후 (응답이 다시 돌아 오면) 해당 필드에서 포커스가 사라집니다. 꽤 짜증나. 어떻게 그 문제를 해결할 수 있습니까? 모델의 복사본 두 개 ($ 리소스와 함께 사용되는 모델과 $ 범위에서 사용되는 모델)를 직접 유지해야하며 둘 사이의 변경 사항을 수동으로 추적해야합니까? 그것은 각도의 길처럼 들리지는 않습니다. 더 나은 해결책이 있어야합니다.

감사합니다.

답변

2

문제 # 1

나는 Lo-Dash debounce 같은 것을 사용합니다. 빠른 google 검색은 How to auto save with angular and debounce을 보여 주며 각 입력에 ng-blur 및 ng-change를 추가 할 필요가 없습니다. 또한 여러 입력을 신속하게 편집하는 사용자에게 더 효율적이어야합니다.

문제 # 2

은 $ 저장.() 리소스 후에 호출되는 $은() 또는 $ 범위. $ 다이제스트을 적용합니다. $ 범위 같은데() 그런데 왜 확실하지 않다.

+0

$ apply 또는 $ digest가 문제가되는 이유는 무엇입니까? 내 코드에서 명시 적으로 호출하지는 않지만 각도에서 볼 때 정상적인 흐름입니다. –

+0

은 첫 번째 질문에 대한 대답을 수락하고 두 번째 질문을 별도의 질문으로 나눌 것입니다. –

+0

두 번째 질문은 http://stackoverflow.com/q/21618660/1076865입니다. –