angularjs를 사용하여 저장되지 않은 데이터 감지
저는 AngularJs가 처음이라 별 볼일 없을 것 같아요.내장 AngularJs가 있습니까?directive폼에서 저장되지 않은 데이터를 탐지합니다.그렇지 않다면 어떻게 써야 할까.어떤 조언이라도 주시면 감사하겠습니다.
html 코드는
<input type="text" runat="server" />
그리고 나의 각도 js 컨트롤러 코드는
function MyCtrl1($scope) {
// code to do stuff
}MyCtrl1.$inject = ['$scope'];
저장되지 않은 데이터를 검출하기 위한 지시문을 작성하려고 하는데, 위의 컨트롤러에 기재되어 있을 것으로 추측됩니다.틀렸으면 정정해 주세요.
AngularJS는 CSS 클래스를 설정합니다.ng-pristine그리고.ng-dirtyng-model을 사용한 임의의 입력 필드에서는 FormController에 속성이 있습니다.$pristine그리고.$dirty폼이 더럽지 않은지 확인할 수 있습니다.네, 가능합니다.
당신이 하려는 일을 보여주는 코드를 제공해 주시겠습니까?그러면 당신을 더 쉽게 도울 수 있을 거예요.
편집
다음은 오염되지 않은 상태를 검출하는 방법과 오염되지 않은 상태로 되돌리는 방법에 대한 간단한 예입니다.
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
function Ctrl($scope) {
var initial = {text: 'initial value'};
$scope.myModel = angular.copy(initial);
$scope.revert = function() {
$scope.myModel = angular.copy(initial);
$scope.myForm.$setPristine();
}
}
</script>
</head>
<body>
<form name="myForm" ng-controller="Ctrl">
myModel.text: <input name="input" ng-model="myModel.text">
<p>myModel.text = {{myModel.text}}</p>
<p>$pristine = {{myForm.$pristine}}</p>
<p>$dirty = {{myForm.$dirty}}</p>
<button ng-click="revert()">Set pristine</button>
</form>
</body>
</html>
감시pristine/dirtystate를 사용하는 것이 좋습니다.그러나 사용자에게 최상의 사용성을 제공하려면 현재 양식 데이터와 초기 양식 데이터를 비교하여 변경을 감지해야 합니다.폼이 더럽다고 해서 데이터가 변경된 것은 아닙니다.
이 문제를 해결하기 위해 매우 작고 유용한 모듈을 만들었습니다.이를 통해 컨트롤러 코드를 최대한 단순하게 유지할 수 있습니다.가세하다modified모든 모델에 대한 속성 및 폼 컨트롤러에 대한 자동 설정 및 제공된 폼을 호출하는 것만으로 전체 폼을 리셋할 수 있습니다.reset()따라서 수동으로 변경을 감지하는 대신 애플리케이션의 비즈니스 논리에 집중할 수 있습니다.
데모를 참조하십시오.
배포 패키지 및 소스 코드는 https://github.com/betsol/angular-input-modified 에서 찾을 수 있습니다(Bower 경유에서도 이용 가능).
이 라이브러리 사용에 도움이 필요하시면 저에게 직접 문의해 주십시오.기꺼이 도와드리겠습니다.건배!
이게 내가 컨트롤러에서 했던 일이야.
수정할 폼 데이터를 얻으면 먼저 다음과 같은 스코프 변수에 문자열 표현을 저장합니다.
$scope.originalData = JSON.stringify($scope.data);
그런 다음 상태 변경 청취자를 만듭니다.
var $locationChangeStartUnbind = $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if ($scope.originalData !== JSON.stringify($scope.data)) {
//Show alert and prevent state change
} else {
//DO NOTHING THERE IS NO CHANGES IN THE FORM
}
});
그런 다음 스코프 파괴에 대한 청취자를 클리어합니다.
$scope.$on('$destroy', function () {
window.onbeforeunload = null;
$locationChangeStartUnbind();
});
이게 도움이 됐으면 좋겠다.
이 명령어를 UI 라우터와 함께 사용해 보십시오.
https://github.com/facultymatt/angular-unsavedChanges
언급URL : https://stackoverflow.com/questions/14849857/detect-unsaved-data-using-angularjs
'programing' 카테고리의 다른 글
| NSJON Serialization 오류 - JSON 쓰기(메뉴)에 잘못된 유형이 있습니다. (0) | 2023.03.20 |
|---|---|
| ui-bootstrap-tpls.min.js와 ui-bootstrap.min.js의 차이점은 무엇입니까? (0) | 2023.03.20 |
| 그물 잡는 법:ERR_CONNECTION_REFUSED (0) | 2023.03.15 |
| 후크가 반응하는 API 호출은 어디서 할 수 있나요? (0) | 2023.03.15 |
| 각도 2 단위 테스트: 'descript' 이름을 찾을 수 없습니다. (0) | 2023.03.15 |