javascript - modulos - AngularJS: directiva que actualiza el alcance principal dentro de ng-repeat

ng-model

Question

Tengo una directiva personalizada que se puede arrastrar dentro de una repetición ng de imágenes. Quiero almacenar el desplazamiento x, y de cada imagen después de haber sido arrastrado. Por lo tanto, necesito la directiva para actualizar un campo en la imagen.

return {
    restrict: ''A'',
    scope: false,
    link: function(scope, element, attrs){
        element.draggable({
            containment: "parent",
            cursor: "crosshair",
            stop: function(ev, ui) {
              scope.left=ui.helper[0].style.left;
              scope.top=ui.helper[0].style.top;
          }
       });
     }
  };

  <div ng-repeat="image in images" 
       draggable
       ng-style="{left:image.left,
                 top:image.top}">... image stuff here ...</div>

Lamentablemente, esto no funciona, porque cuando ng-repeat crea el ámbito hijo para cada elemento de imagen,

crea un nuevo ámbito, que prototípicamente hereda del ámbito primario, pero también asigna el valor del elemento a una nueva propiedad en el ámbito secundario. (El nombre de la nueva propiedad es el nombre de la variable de bucle) ( https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat )

Puedo hacer que la directiva funcione como yo quiero al cambiar la referencia para usar el nombre de la variable de bucle:

scope.image.left=ui.helper[0].style.left;
scope.image.top=ui.helper[0].style.top;

pero no quiero codificar el nombre de la variable de bucle en la directiva.

¿Cuál es la mejor manera de pasar el nombre de la variable de bucle a la directiva o, idealmente, pasar directamente la referencia al valor del elemento a la directiva?

Answer 1

En este caso, es conveniente utilizar un alcance aislado y pasar el objeto de imagen actual a la directiva mediante el enlace bidireccional.

Entonces HTML puede ser algo como esto:

<div ng-repeat="image in images" draggable="image" ng-style="{left:image.left, top:image.top}">
    <!-- ... image stuff here ... -->
</div>

y directiva entonces:

.directive(''draggable'', function () {
    return {
        scope: {image: ''=draggable''},
        link: function (scope, element, attrs) {
            element.draggable({
                containment: "parent",
                cursor: "crosshair",
                stop: function (ev, ui) {
                    scope.image.left = ui.helper[0].style.left;
                    scope.image.top = ui.helper[0].style.top;
                }
            });
        }
    };
});

De esta forma ya no codificará el nombre de la variable y hará que la directiva sea más reutilizable. Por ejemplo, puede cambiar HTML a ng-repeat="img in images" draggable="img" pero el código de la directiva permanecerá igual.