2012-09-26 13 views
25

Mam kilka połączonych list ul w moim widoku, które są przy użyciu jQuery UI: Sortable dyrektywy, aby ułatwić przeciąganie i upuszczanie i zmianę kolejności elementów listy.Angular.js: czy możliwe jest ponowne renderowanie powtórzeń ng w oparciu o istniejące dane zakresu?

zmiany wprowadzone poprzez przeciąganie jQuery UI i upuść I stosuje się do $scope użyciu funkcji $apply ta część działa ...

Problem używam do teraz jednak jest to, że na spadek do niektórych z tych wykazów I świadczą niestandardowy formularz, który użytkownik musi wypełnić.

Użytkownik ma możliwość:

  1. wypełnić formularz i kontynuować który następnie robi $apply wywołanie utrzymuje dane do $scope
  2. kliknij przycisk anulować który zamiast wywoływania $apply do przechowywania informacji, powinna przywrócić ostatnią interakcję przeciągania/upuszczania, skutecznie "renderując ponownie" wszystkie moje listy, aby odzwierciedlić dane, które wciąż są na tym etapie w $scope (ponieważ ostatnie przeciągnięcie jeszcze nie miało na nie wpływu).

Efekt tego przycisku "Anuluj" skutecznie przywraca wszystko do punktu, w którym użytkownik wybrał element listy i przeciągnął go na inną listę.

Jak mogę wymusić odświeżenie lub ponowne renderowanie moich ng-repeat s, aby odświeżyć i ponownie wyświetlić bieżące dane $scope?

+3

Normalnie zmiana modelu danych ($ scope) będzie działać, jeśli zostanie wykonana wewnątrz AngularJS. Jeśli zostanie wykonane na zewnątrz, wywołanie funkcji $ scope. $ Apply() powinno uruchomić aktualizację/odświeżenie. Pod koniec operacji anulowania wywołujesz $ scope. $ Apply() lub zawijanie zmian w $ scope. $ Apply (function() {... zmiany tutaj ...})? –

+0

Rzeczywiście nazywam '$ scope.apply()' z dyrektywy opartej na jQuery, ale nie wydaje się wymuszać przeładowania/ponownego renderowania istniejących danych. Prawdopodobnie dlatego, że Angular uważa, że ​​wszystko jest dokładnie takie samo, nie wiedząc o tym, że wykonałem manipulację DOM, nie mówiąc o tym. Tak naprawdę potrzebuję tylko połączenia typu "odświeżaj siłę", gdzie kątowe niezależnie od stanu '$ scope' wymusza jedynie odświeżenie renderowanych danych. – Jannis

+0

Cóż, jako możliwe obejście problemu, co jeśli usuniesz przeciągnięty element z $ scope wewnątrz twojego wywołania do $ scope. $ Apply() - Angular powinien to zobaczyć i ponownie wysłać - następnie w następnym wierszu (nadal w twoim $ scope . $ apply() call) dodaj je ponownie za pomocą $ timeout(): '$ timeout (function() {... dodaj usunięty element z powrotem do $ scope tutaj ...});' manipulację $ scope, którą wykonujesz w funkcja $ timeout powinna spowodować drugie renderowanie. –

Odpowiedz

22

Gdy użytkownik uruchamia wypełnienie formularza, chciałbym ustawić

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

Potem niech edycji użytkownika $ scope.data za pomocą formularza, jak lubi.

Następnie, jeśli użytkownik naciśnie anuluj, po prostu ustaw $scope.data = $scope.oldData.

+0

Użyłem w ten sposób, ale musiałem zadzwonić, by $ zastosować dwukrotnie; scope.oldData = angular.copy (scope.irs); scope.irs.length = 0; scope. $ Apply(); scope.irs = scope.oldData; Zakres .$ apply(); –

+0

To świetne rozwiązanie. Pomogło mi to w ponownym renderowaniu powtórzenia powtórzenia, w którym same dane się nie zmieniły, ale musiały zostać zdecydowanie ponownie renderowane. Zrobiłem tylko $ scope.data [0] = angular.copy ($ scope.data [0]); zamiast kopiować całą tablicę. Byłoby miło wiedzieć, czy istnieje funkcja angularjs dla tego ponownego renderowania rzeczy wyzwalających; –

+2

Domyślnie kątowy będzie śledził, czy element powtarzalny ng musi zostać ponownie renderowany poprzez umieszczenie zmiennej '$$ hashKey' na każdym obiekcie w przemienniku. Jeśli '$$ hashKey' zmieni się na jednym z indeksów, ponownie wyświetli to. Klucz hashKey może się zmienić przez element poruszający się w tablicy, podczas usuwania lub dodania nowego. Możesz określić kątowo, jaką właściwość śledzić, aby zobaczyć, czy powinna ona ponownie renderować, wykonując element 'ng-repeat =" w pozycjach track według item.id "" lub podobnych - wtedy jeśli 'item.id' zmienia się w indeksie, będzie ponownie renderować. –