実装の詳細:チェック(UI-ルータを使用して、複数のフォーム)
私は、UIビューのdivにフォームページをロードするために、UI-ルータを使用しています。私はAndres Ekdahiの素晴らしい例を参照しました。同じディレクティブを使用して複数のフォームで$ dirty checkを行うにはどうすればよいですか?
をForm1
<form name="myForm" ng-controller="Controller" confirm-on-exit>
Form2の
<form name="iForm" ng-controller="Controller" confirm-on-exit ng-model="myModel">
app.js(ディレクティブ)
myApp.directive('confirmOnExit', function() {
return {
link: function($scope, elem, attrs) {
// condition when back page is pressed
window.onbeforeunload = function(){
if ($scope.myForm.$dirty) {
return "The formI is dirty, do you want to stay on the page?";
}
}
// condition when user try to load other form (via icons)
$scope.$on('$stateChangeStart', function(event, next, current) {
if ($scope.myForm.$dirty) {
if(!confirm("myForm. Do you want to continue ?")) {
event.preventDefault();
}
}
if ($scope.iForm.$dirty) {
if(!confirm("iform. Do you want to continue ?")) {
event.preventDefault();
}
}
});
}
};
});
エラー:ページのロードの
初めて、$汚い値であります偽です。私はフォームの詳細を記入して3番目のアイコン(ファイル)をクリックすると、2番目のフォームの汚れチェックif ($scope.iForm.$dirty)
と、$dirty
のアラートが表示されます。
angular.js:12520 TypeError: Cannot read property '$dirty' of undefined
と
<form name="iForm" ng-controller="Controller" confirm-on-exit="" ng-model="myModel" class="ng-pristine ng-untouched ng-valid ng-scope">
デモ:それは汚れているかどうかをチェックする前に、フォームが存在する場合はPlunker
'$ scope [attrs.name]'が探していることを教えてもらえますか?フォームデータの変更やユーザーのクリックに対してのみ適用されますか? –
@ Mad-Dはフォーム名を取り、コントローラスコープ内で 'formName'を検索します。 –
ありがとう、私はそれが私がする必要があったと思う。 –