45

私はAngularJsの初心者なので、これは些細なことかもしれません。directiveフォーム内の保存されていないデータを検出する組み込みの AngularJs はありますか。そうでない場合は、どのように書くか。任意のポインタをいただければ幸いです。

htmlコードは

<input type="text" runat="server" />

そして、私のAngular jsコントローラーコードは

    function MyCtrl1($scope) {
      // code to do stuff
}MyCtrl1.$inject = ['$scope'];

保存されていないデータを検出するためのディレクティブを作成しようとしていますが、上記のコントローラーに記述されていると推測しています。間違っている場合は修正してください。

4

4 に答える 4

35

状態の監視pristine/dirtyは開始するのに適した場所ですが、ユーザーに可能な限り最高の使いやすさを提供したい場合は、現在のフォーム データと初期フォーム データを比較して変更を検出する必要があります。フォームが汚れていても、データが変更されたわけではありません。

この正確な問題を解決するために、非常に小さくて便利なモジュールを作成しました。これにより、コントローラーのコードをできるだけシンプルに保つことができます。すべてのモデルとフォーム コントローラーにプロパティを自動的に追加modifiedし、提供されたメソッドを呼び出すだけでフォーム全体をリセットreset()できるため、手動で変更を検出する代わりに、アプリケーションのビジネス ロジックに集中できます。

デモをご覧ください。

ここで配布パッケージとソースコードを見つけることができます: https://github.com/betsol/angular-input-modified ( Bowerからも入手できます)

このライブラリの使用に関して何か助けが必要な場合は、個人的に私に連絡してください。喜んでお手伝いさせていただきます。乾杯！

于 2014-10-13T11:15:39.090 に答える
16

これは、コントローラーで行ったことです。

変更するフォーム データを取得したら、まず、次のようにその文字列表現をスコープ変数に保存します。

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

お役に立てれば。

于 2015-04-20T16:58:50.030 に答える
1

ui-router で動作するこのディレクティブを試してください

https://github.com/facultymatt/angular-unsavedChanges

于 2014-04-15T19:03:58.233 に答える