1

実装の詳細:

ui-view divにフォームページをロードするためにui-routerを使用しています。Andres Ekdahiの素晴らしい例を参照しました。同じディレクティブを使用して複数のフォームで $dirty チェックを行うにはどうすればよいですか?

フォーム1

 <form name="myForm" ng-controller="Controller" confirm-on-exit>

フォーム2

<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();
                        }
                    }
                });
            }
        };
    });

エラー：

初めてページをロードしたとき、$dirty 値は false です。フォームの詳細を入力し、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">

デモ：プランカー

4

3 に答える 3

1

nameの属性からディレクティブを取得することで、ディレクティブをよりシンプルにします。これによりform、1 つの条件のみがディレクティブ内にあり、多くの場所で再利用できるようになります。

<form name="myForm" ng-controller="Controller" confirm-on-exit>

コード

var form = $scope[attrs.name]; //which will take out form name & do search that inside scope
if (form.$dirty) { //form object would always exist, to make sure you could also add one more check `form &&`
    if(!confirm("myForm. Do you want to continue ?")) {
        event.preventDefault();
    }
}

デモはこちら

于 2016-03-28T22:04:48.380 に答える