자동 저장 기능이있는 필드가 많은 모델의 편집기를 구현하려고합니다.
모델은 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을 누른 경우 잠시 후 (응답이 다시 돌아 오면) 해당 필드에서 포커스가 사라집니다. 꽤 짜증나. 어떻게 그 문제를 해결할 수 있습니까? 모델의 복사본 두 개 ($ 리소스와 함께 사용되는 모델과 $ 범위에서 사용되는 모델)를 직접 유지해야하며 둘 사이의 변경 사항을 수동으로 추적해야합니까? 그것은 각도의 길처럼 들리지는 않습니다. 더 나은 해결책이 있어야합니다.
감사합니다.
$ apply 또는 $ digest가 문제가되는 이유는 무엇입니까? 내 코드에서 명시 적으로 호출하지는 않지만 각도에서 볼 때 정상적인 흐름입니다. –
은 첫 번째 질문에 대한 대답을 수락하고 두 번째 질문을 별도의 질문으로 나눌 것입니다. –
두 번째 질문은 http://stackoverflow.com/q/21618660/1076865입니다. –