4

Suponiendo que tengo la siguiente directiva:

.directive("viewSeats", ['$parse', function ($parse) {
    return {
        restrict: 'E',
        scope: {
            numItinerary: "@",
            numSegment: "@",
            seatMap: "@",
            allTravelers: "@",
            allData: "@",
            flightPnr: "@",
            flightNumber: "@",
            flightTerminal: "@"
        },
        templateUrl: baseEnginePath + "/Templates/FLight/flight-seats.html",
        controller: ["$scope", "$element", "$compile", function ($scope, $element, $compile) {

        }],
        link: function ($scope, $elem, $attrs) {

            $elem.bind("click", function () {

                console.log("flightPnr", $scope.flightPnr);

                jQuery.fancybox($('#modalSeats'), {
                    'width': '600',
                    'height': '800',
                    'autoSize': false
                });
            });           

        }
    };
}]);

La directiva anterior la mando llamar en un Loop algo así como un ng-repeat de la siguiente manera:

<div imaginemos que aqui es el ng-repeat y la directiva se genera x cantidad de veces>
   <view-seats all-data="@jsonDisplayRS" all-travelers="@jsonTravelers" seat-map="@seatsData" flight-pnr="@listSegments.Item(i + p).Item(17)" flight-number="@listSegments.Item(i + p).Item(8)" flight-terminal="@listSegments.Item(i + p).Item(6)" num-itinerary="@listSegments.Item(i + p).Item(18)" num-segment="@listSegments.Item(i + p).Item(16)"></view-seats>
</div>

nota: estoy usando razor de .net. Bueno hasta ahí las cosas van bien. ya que si mando pintar una de las variables que mando a mi directiva con un console.log mi variable cambia dependiendo la posición del loop.

El problema surge en el template de la directiva que no se renderea o actualiza con el valor que tengo en el link de la directiva. El template es el siguiente:

 <ul>
     <li>
      PNR
      <strong>{{flightPnr}}</strong>
     </li>
  </ul>

(esta es solo una parte del template pero para no hacer mas larga la pregunta solo puse este fragmento)

La variable flightPnr la mando como parámetro cuando genero la directiva en el loop, como ya comente anteriormente si coloco un console.log si se modifica, pero en la platilla no y ese es mi problema, ¿Cómo puedo hacer que esa y todas las demás variables de modifiquen en el template?

nota: la directiva es un botón es por eso que tengo un $elem.bind("click", function () {}) en el link.

4
  • ¿Te refieres a que te imprime el mismo valor en cada iteración? o ¿cuándo das click no cambia dicho valor?.
    – Chofoteddy
    Commented el 7 ene. 2016 a las 23:35
  • el valor cambia en cada iteración, el problema es que no actualiza el template del fancybox, lo que tube que hacer es recompilar el el fancybox agregandole el valor cada ves que le doy clic al boton (la directiva es un boton).
    – Goyo
    Commented el 8 ene. 2016 a las 15:23
  • 1
    En efecto, es lo mejor, yo también utilizo esa práctica para las gráficas jQuery que integro a AngularJs. Estaría padre que respondas a tu pregunta con tu solución :D.
    – Chofoteddy
    Commented el 8 ene. 2016 a las 18:31
  • 2
    @JoséGregorioCalderón Probé el codigo que posteaste y a mi me funciona bien. ¿Que es lo que te imprime el razor? ¿Valores o nombres de variables en el scope? Si es el primer caso tu ejemplo no tiene ningún problema.
    – devconcept
    Commented el 19 ene. 2016 a las 14:09

2 respuestas 2

1

Creo que se solucionaria usando las propiedades del scope como two-way binding o sea usando el igual = en vez del arroba @

scope: {
  numItinerary: "=",
  numSegment: "=",
  seatMap: "=",
  allTravelers: "=",
  allData: "=",
  flightPnr: "=",
  flightNumber: "=",
  flightTerminal: "="
};

esto hace que angular mantenga la referencias de las variables

-2

Bueno... Es sencillo, lo primero es que tanto Angular como jQuery (fancybox) tienen sus propias variables. Y no es buena idea usar ambas librerías al tiempo. Es como usar .Net con Mono, pues de poder se puede PERO tu web queda muy pesada demasiado!.

Segun fancyBox Api dice

$.fancybox( '<h1>Lorem lipsum</h1>' );

Entonces, PERO! AngularJS usa el HTML como una plantilla. Entonces, jQuery no lee esos cambios, y muchas veces son complicados.

Con facnyBox

jQuery.fancybox('<h1>Lorem lipsum ' + $scope.flightPnr + '</h1>', {
    'width': '600',
    'height': '800',
    'autoSize': false
});

Unicamente AngularJs toca con ngDialog

var app = angular.module('exampleApp', ['ngDialog']);

app.directive("viewSeats", ['$parse', 'ngDialog', function ($parse, ngDialog) {
return { 
      // Mas... codigo
      link: function ($scope, $elem, $attrs) {
          $scope.close = function(){
             console.log('se cerro el dialogo');
          };
          $elem.bind("click", function () {
              ngDialog.open({ 
                 template: 'popupTmpl',
                  scope: $scope });
          });
       }
    };
});

Yo recomiendo solo usar Angular o solo jQuery. No mezclarlo!

7
  • 1
    "Yo recomiendo solo usar Angular o solo jQuery. No mezclarlo!" Esto está mal ya que angular.element devuelve un api jqLite muy similar a jQuery y si se incluye el script de jQuery antes del angular, este usará el api de jQuery en su lugar lo que significa que Angular está diseñado para trabajar con jQuery. ngDialog y fancybox son dos librerías que no tienen relación. Tu respuesta como tal no provee solución a la pregunta.
    – devconcept
    Commented el 3 may. 2016 a las 20:32
  • Falso, lo que usa es jqLite. Que es completamente diferente! La diferencia es que este es que la librería esta montada en el mismo angular. En cambio "jQuery", seria una segunda librería. Cosa que aumenta la cantidad de tiempo. Por favor Leer! docs.angularjs.org/api/ng/function/angular.element Este es Jquery -- > api.jquery.com Y este jqLite --> github.com/jstools/jqlite Y mira la cantidad de funciones que tiene y la diferencia!!
    – Alejo Next
    Commented el 4 may. 2016 a las 17:57
  • Yo se muy bien la diferencia entre las librerías y sus funciones, también estoy consciente que tienes que cargar otra librería sin embargo tu afirmación está solamente basada en una opinión y no tiene nada que ver con la pregunta en cuestión. Angular está diseñado para trabajar con jQuery ya que el código fuente explícitamente busca si jQuery está cargado y lo incluye en lugar de jqLite. Inyecta $element y haz un console.log para que notes la diferencia.
    – devconcept
    Commented el 4 may. 2016 a las 18:32
  • También es una curiosidad que la librería a la que haces referencia con jqLite tenga un api idéntico al de angular sin embargo las implementaciones no son iguales (jqLite y angular). Creo que hiciste referencia a la librería equivocada.
    – devconcept
    Commented el 4 may. 2016 a las 18:43
  • 1
    Nunca he hecho una aplicación en la que no haya tenido que incluir un plugin o un módulo de angular de terceros. Tu recomendación está bien algunas veces, no siempre. He visto a muchos intentar incluir un monton de librerías y escribir gran cantidad de código "sólo para no incluir jQuery" lo cual termina siendo absurdo ya que el código resultante es más pesado aún. El único caso que le veo es cuando vas a hacer una aplicación que no hace querys complejas al DOM ya que como dices la diferencia entre jQuery y jQLite es abismal. No hay nada de malo en levantar las dos librerías.
    – devconcept
    Commented el 4 may. 2016 a las 20:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.