2012-09-26 11 views
25

Tengo un montón de listas ul conectadas en mi vista que están utilizando una jQuery UI: directiva ordenable para facilitar el arrastre, soltar y reordenar los elementos de la lista.Angular.js: ¿Es posible volver a procesar repeticiones ng en función de los datos de ámbito existentes?

cambios que realice a través de arrastrar de jQuery UI y soltar aplico a la $scope usando la función $apply, esta parte funciona ...

El problema que estoy corriendo en sin embargo, ahora es que el descenso en algunas de estas listas que proporciono un formulario personalizado que el usuario debe completar.

El usuario tiene la opción de:

  1. rellenar el formulario y continuar que luego hace la $apply llamada a persiste los datos en el $scope
  2. haga clic en un botón de cancelación, que en lugar de llamar a la $apply para almacenar información, debe revertir la última interacción de arrastrar/soltar 're-renderizando' todas mis listas para reflejar los datos que todavía están en el $scope en esta etapa (ya que el último arrastre aún no ha tenido ningún efecto).

El efecto de esta "Cancelar" está sonando de manera efectiva todo hasta el punto antes de que el usuario recogió el elemento de la lista y lo arrastró en otra lista.

¿Cómo puedo forzar una 'actualización' o 're-render' de mi ng-repeat s para que refresquen visualmente y muestren los datos actuales $scope de nuevo?

+3

Normalmente, solo cambiar el modelo de datos ($ scope) funcionará, si se hace dentro de AngularJS. Si se hace afuera, al llamar a $ scope. $ Apply() debería desencadenar la actualización/actualización. Al final de sus manipulaciones de cancelación, ¿está llamando $ scope. $ Apply(), o ajustando sus cambios en $ scope. $ Apply (function() {... changes here ...})? –

+0

De hecho, estoy llamando a '$ scope.apply()' desde el interior de la directiva jQuery pero parece que no obliga a volver a cargar o volver a procesar los datos existentes. Probablemente porque Angular piensa que todo es exactamente igual, sin saber que yo haya hecho la manipulación DOM sin decírselo. Entonces, lo que realmente necesito es solo un tipo de llamada de 'force refresh', donde Angular independientemente del estado '$ scope' solo fuerza una actualización de sus datos renderizados. – Jannis

+0

Bueno, como una posible solución alternativa, ¿qué pasa si elimina el elemento arrastrado de $ scope dentro de su llamada a $ scope. $ Apply() - Angular debería ver eso y rerender - luego en la línea siguiente (aún dentro de su $ scope . $ apply() llamada) agréguela de nuevo utilizando $ timeout(): '$ timeout (function() {... añadir el elemento eliminado a $ scope aquí ...});' The $ scope manipulation que realiza en la función $ timeout debería provocar que ocurra un segundo renderizado. –

Respuesta

22

Cuando el usuario empieza a llenar el formulario, me gustaría establecer

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

luego dejar que el usuario editar $ scope.data utilizando el formulario como le gusta.

Luego, si el usuario presiona cancelar, simplemente configure $scope.data = $scope.oldData.

+0

Lo usé de esta manera, pero necesitaba llamar $ apply dos veces; scope.oldData = angular.copy (scope.irs); scope.irs.length = 0; alcance. $ Apply(); scope.irs = scope.oldData; alcance.$ apply(); –

+0

Es una gran solución. Me ayudó a desencadenar una nueva representación de una repetición ng donde los datos en sí mismos no cambiaron, pero tuvieron que volver a renderizarse a la fuerza. Solo hice un $ scope.data [0] = angular.copy ($ scope.data [0]); en lugar de copiar toda la matriz. Sería bueno saber si hay una función angularjs para este reentrante desencadenante; –

+2

De forma predeterminada, angular rastreará si un elemento ng-repeat necesita volver a representarse colocando una variable '$$ hashKey' en cada objeto en el repetidor. Si el '$$ hashKey' cambia en uno de los índices, vuelve a mostrar eso. Un hashKey podría cambiar a través de un elemento que se mueve en el arreglo, siendo eliminado o agregando uno nuevo. Puede indicar qué propiedad angular a seguir para ver si debe volver a representar haciendo 'ng-repeat =" elemento en elementos rastrear por item.id "' o similar - luego si 'item.id' cambia en un índice, volverá a renderizar. –

Cuestiones relacionadas