Share
En la parte anterior de esta serie de tutoriales, creamos una directiva personalizada y la usamos en nuestra sencilla aplicación de carrito de compras. En esta parte de la serie de tutoriales, veremos cómo hacer que el div total se quede en la parte superior mientras se desplaza el navegador. También crearemos una página de pago donde mostraremos todos los elementos seleccionados por el usuario..
Comencemos por clonar la parte anterior del tutorial de GitHub.
git clone https://github.com/jay3dec/AngularShoppingCart_Part2.git
Después de clonar el código fuente, navegue al directorio del proyecto e instale las dependencias necesarias.
cd AngularShoppingCart_Part2 npm install
Una vez instaladas las dependencias, inicie el servidor.
nodo server.js
Dirija su navegador a http: // localhost: 3000 / y debería tener la aplicación en ejecución.
Aunque estamos utilizando el componente de afijo bootstrap para mantener el div total en la parte superior, no funciona como se esperaba. Vamos a examinar lo que está mal.
El componente de afijo bootstrap agrega una clase llamada afijo cuando nos desplazamos por encima de una cierta altura y poner la parte superior cuando está abajo Todavía funciona en las páginas HTML simples, pero cuando se integra en AngularJS no parece funcionar. Para solucionar este problema, mantendremos un control de la altura del desplazamiento y cuando esté por encima y por debajo de cierta altura, digamos 50 px, agregaremos las clases de afijos en consecuencia.
Entonces, asumiendo que tenemos la altura de desplazamiento como voluta, añade el afijo y poner la parte superior clases a la Total div usando la directiva ngClass.
ng-class = "'affix': scroll> 50, 'affix-top': scroll <= 50"
Para conseguir el scroll crearemos otra directiva. Llamemos a la directiva getScroll. Esta directiva actualizará el voluta valor cada vez que se desplaza la ventana del navegador y se basa en voluta Las clases de afijos serán actualizadas..
Accentsconagua
.directiva ('getScroll', function ($ window) return scope: scroll: '= scroll', link: function (scope, element, attrs) var scrollwindow = angular.element ($ window); scrollwindow.on ('scroll', scope. $ apply.bind (scope, function () scope.scroll = scrollwindow.scrollTop ();));;)Como se ve en el código anterior, estamos pasando un atributo de desplazamiento a la getScroll directiva. En scroll estamos calculando la altura de scroll desde la parte superior usando elemento angular ($ ventana). En cada evento de desplazamiento actualizamos el voluta variable de alcance.
Añadir la directiva anterior al final de la cart.html página.
Guarda estos cambios y actualiza la página. Intente desplazarse por la ventana del navegador y el total debe colocarse en la parte superior, siempre visible.
Para rellenar la página de pago con los elementos seleccionados, necesitaremos pasar los elementos entre los controladores. Así que haremos uso de un servicio AngularJS para pasar los datos entre los controladores. Vamos a crear un servicio llamado CommonProp donde guardaremos los artículos seleccionados y también el precio total. Abrir cart.js y crea un servicio llamado CommonProp como se muestra:
.service ('CommonProp', function () var Items = "; var Total = 0; return getItems: function () return Items;, setItem: function (value) Items = value;, getTotal: function ( ) return Total;, setTotal: function (value) Total = value;;);Como se ve, dentro de la CommonProp servicio hemos definido cuatro funciones para obtener y establecer los artículos y el precio total. Inyectar el CommonProp servicio en el CartCtrl.
.controlador ('CartCtrl', ['$ scope', 'CommonProp', función ($ scope, CommonProp) Estaremos atentos a cualquier cambio en el tiendaDatos variable y actualizar los datos del servicio en consecuencia. Agrega el siguiente código dentro CartCtrl.
$ scope. $ watch ('shopData', function () CommonProp.setItem ($ scope.shopData);)Dentro checkout.js, inyectar el CommonProp servicio en CheckoutCtrl.
.controlador ('CheckoutCtrl', ['$ scope', 'CommonProp', función ($ scope, CommonProp) Estaremos usando el CommonProp Servicio para obtener los artículos y el total en CheckoutCtrl.
.controller ('CheckoutCtrl', ['$ scope', 'CommonProp', function ($ scope, CommonProp) $ scope.items = CommonProp.getItems (); $ scope.total = CommonProp.getTotal ();]);Utilizando $ scope.items Rellenaremos la página de pago. Abrir checkout.html y eliminar la tabla codificada existente. Haremos uso de la directiva ngRepeat y $ scope.items Para crear la tabla y poblarla dinámicamente..
| i.item | Rs. Yo seleccioné |
Guarde los cambios anteriores y actualice la página. Seleccione algunos artículos y luego haga clic en Revisa Botón en la página del carrito. Una vez en la página de pago, debe mostrar la lista de elementos seleccionados.
Incluyamos también el precio total en la página de pago. Entonces, cuando el total se calcula en la función total en CartCtrl, actualizar el CommonProp valor total del servicio.
$ scope.total = function () var t = 0; para (var k en $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected); CommonProp.setTotal (t); devuelve t;
Para mostrar el total en la página de pago, incluya lo siguiente tr Código HTML:
Total: Rs. total
Desde que estamos actualizando el total variable de alcance en CheckoutCtrl, el total se mostrará automáticamente. Guarde los cambios y comience de nuevo. Seleccione algunos artículos y seleccione el pago y envío. Una vez en la página de pago, debería poder ver los artículos seleccionados y el precio total.
Una vez en la página de pago, si hace clic en el Personalizar se lo llevará a la página del carrito, pero todas las selecciones desaparecerán. Así que tenemos que arreglar eso. Una vez cargada la página del carrito, revisaremos CommonProp Servicio para cualquier artículo existente. Si hay elementos presentes, los utilizaremos para completar la página del carrito.
Dentro CartCtrl verifica si existe algún artículo en CommonProp y establecer el $ scope.shopData.
if (CommonProp.getItems ()! = ") $ scope.shopData = CommonProp.getItems ();
Guarde todos los cambios anteriores y reinicie el servidor. Desde la página del carrito, seleccione algunos artículos y luego haga clic en Revisa para navegar a la página de pago. Una vez en la página de pago, haga clic en Personalizar Botón para volver a la página del carrito. Y debe tener todas las selecciones hechas, como son, en la página del carrito.
En esta parte de la serie de tutoriales, implementamos la página de verificación y vimos cómo compartir datos entre diferentes controladores utilizando un servicio AngularJS. También creamos una directiva para obtener la altura de desplazamiento y corregir el problema del afijo bootstrap.
Espero que hayas aprendido algo útil de esta serie de tutoriales. Para obtener información más detallada sobre las directivas de AngularJS, consulte la documentación oficial.
El código fuente de este tutorial está disponible en GitHub. Háganos saber sus pensamientos y correcciones en los comentarios a continuación!
