2012-09-26 14 views
25

私はjQuery UIを使用して私のビューに接続ulリストの束を持っています:リスト項目のドラッグアンドドロップと並べ替えを容易にするSortable指示。Angular.js:既存のスコープデータに基づいてng-repeatsを再レンダリングすることは可能ですか?

私はjQueryのUIのドラッグを経由して行うことと私は$apply機能を使用して$scopeに適用されますドロップの変更、この部分が動作する...

私は今に実行している問題は、しかし、これらのリストの一部にドロップに私が提供するということですユーザーが記入する必要があるカスタムフォーム。

ユーザーがオプションがあります:代わりに$applyを呼び出すのキャンセルボタンをクリックし

  1. は、その後 に$apply呼び出しが$scope
  2. にデータを永続化しないどのフォームに必要事項を記入し、継続を最後のドラッグ・アンド・ドロップのやり取りを元に戻し、すべてのリストをこの段階でまだ$scopeにあるデータを反映するように効果的に再レン​​ダリングする必要があります(最新のドラッグがまだ影響を与えていないためです)。

この「キャンセル」ボタンの効果は、ユーザーがリストアイテムをピックアップして別のリストにドラッグする前にすべてのポイントを効果的に元に戻すことです。

ng-repeatを強制的にリフレッシュまたは再レンダリングして、現在の$scopeデータを視覚的にリフレッシュして表示するにはどうすればよいですか?ユーザーがフォームに入力を開始すると、私は

$scope.oldData = angular.copy($scope.data);

はその後、彼が好きなようフォームを使用して、ユーザ編集の$ scope.dataを聞かせて設定します

+3

AngularJSの内部では、通常、データモデル($ scope)を変更するだけで動作します。外部で行われた場合、$ scope。$ apply()を呼び出すと更新/リフレッシュが開始されます。キャンセル処理の最後に、$ scope。$ apply()を呼び出すか、変更を$ scopeにラップしますか?$ apply(function(){... changes changes ...})? –

+0

私は実際に '$ scope.apply()'をjQueryベースのディレクティブの中から呼び出していますが、既存のデータの再ロード/再レンダリングを強制しないようです。おそらく、Angularはすべてがまったく同じだと思っているので、DOM操作をしてくれた私がそれについて話すことなく知らなかったでしょう。ですから、私が実際に必要とするのは、 '$ 'スコープに関係なくAngularがレンダリングされたデータの更新を強制する' force refresh'タイプの呼び出しです。 – Jannis

+0

まあ、考えられる回避策として、$ scopeの呼び出しの中で$ scopeからドラッグされた項目を削除するとどうなるでしょうか?$ apply() - Angularはそれを見て再レンダリングします。 。$ apply()call)$ timeout()を使ってもう一度それを追加してください: '$ timeout(function(){...ここで$ scopeに削除された項目を戻します。}};' $ timeout関数は2番目のレンダリングを起こさせるはずです。 –

答えて

22

ユーザがキャンセルを押すと、$scope.data = $scope.oldDataと設定されます。

+0

私はこの方法で使用しましたが、$ applyを2回呼び出す必要がありました。 scope.oldData = angular.copy(scope.irs); scope.irs.length = 0; $ apply(); スコープ。 scope.irs = scope.oldData; ; スコープ。$ apply(); –

+0

それは素晴らしい解決策です。データ自体は変更されず、強制的に再レン​​ダリングされなければならないng-repeatの再レンダリングをトリガーするのに役立ちました。私は$ scope.data [0] = angular.copy($ scope.data [0])のみを実行しました。アレイ全体をコピーするのではなく、この再レンダリングトリガのためにangularjs関数があるかどうかを知ることはいいでしょう。 –

+2

デフォルトでは、repeaterの各オブジェクトに '$$ hashKey'変数を入れてng-repeat要素を再レンダリングする必要がある場合、angleはそれを追跡します。 '$$ hashKey'がいずれかのインデックス上で変更された場合、それは再描画されます。 hashKeyは、配列内を移動する要素、削除される要素、または新しい要素が追加されるときに変更される可能性があります。 items.id "などでアイテムトラック内の' ng-repeat = "アイテムを実行することによって、どのようなプロパティを追跡して再レンダリングするべきかを知ることができます。もし' item.id'がインデックスで変更された場合、再レンダリングされます。 –

関連する問題