Angularjs support about swipe HOT 7 CLOSED

This is a bit out of topic. But do you guys know of any wrapper for this slider in Angular 4?

from swipe.

Great feature! Merged!

from swipe.

Hi @loup-brun , do you mind if I add you as collaborator?

from swipe.

Sure - no problem ;) Happy to help!

from swipe.

Let me know if the multiple directives sound confusing. Maybe there could be a better design, but in respect to the Angular scopes, I think this is a relatively robust architecture.

from swipe.

Using multiple directives is ok to me.

Below is how I use swipe in my angular project for several months ago:

'use strict'

###*
 # @ngdoc directive
 # @name vetServicesApp.directive:common/swipe
 # @description
 # # common/swipe
###
angular.module('vetServicesApp.directives')
  .directive('swipe', [
    '$timeout'
    ($timeout) ->
      restrict: 'AE'
      link: (scope, element, attrs) ->
        initSwipe = () ->
          if scope.mySwipe
            scope.mySwipe.kill()
            scope.mySwipe = null
          scope.mySwipe = new Swipe(element[0],
            startSlide: 0
            speed: 400
            auto: parseInt(attrs.auto)
            draggable: true
            autoRestart: false
            continuous: true
            disableScroll: false
            stopPropagation: false
            callback: (index, elem) ->
              angular.element(".swipe-num li")
                     .removeClass("active")
                     .eq(index)
                     .addClass("active")
              return
            transitionEnd: (index, elem) ->
              return
          )
          return

        if attrs.usingNgRepeat
          scope.$on 'Event:ng-repeat-finish-render', ->
            $timeout(initSwipe, 100)
        else
          $timeout(initSwipe, 100)

        scope.$on 'Event:ImagesLoaded', ->
          $timeout ->
            scope.mySwipe.setup()
          , 100
        return
])

There are two things may cause problems when using swipe in angular:

1. When using with ng-repeat, due to the async process of ng-repeat, swipe may init before the items are loaded, especially when loading items via Ajax.
2. Another common problem is when using swipe with images. There are occasions that swipe will not perform properly when images are loading with high latency.

So, you can see that I use two additional directives for monitoring ng-repeat and image loading status to initiate or setup swipe.

It is great If these two problems can be fixed with better solutions ^_^
@loup-brun Any good ideas?

from swipe.

I'll have to make some tests with ng-repeat, since I haven't used Swipe with that directive - though I can see how pertinent it can be.

Since wrapping the Swipe library in Angular brings some compromises, we might (just a quick thought, not yet a serious consideration) port the project to a different repository to better enable Angular support.

from swipe.