question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angularjs support

See original GitHub issue

I’ve begun integrating Swipe into Angular.js. The integration works well so far and does not touch the original swipe.js file, but there are limitations in simply wrapping the library.

There are 3 main directives:

  • swipe-wrap: initializes the Swipe controller and thus will contain all the Swipe-related model/logic. Additional components (directives) may added within this wrapper, such as a counter or a controls directive;
  • swipe-slider: the actual slider;
  • swipe-item: a slide, which contains the client’s html.

The swipe-wrap must be a parent of the swipe-slider, because the latter transcludes, thus creating a new, isolated scope that inherits from the $parent scope. Therefore, in order for the model to propagate correctly, the swipe-wrap must be parent of the slider.

All the Swipe options are supported. However, since the original swipe.js is untouched, I must create a new callback function which includes $scope.$apply() AND the client callback in order for every slide change to be added to the event loop. (otherwise, Angularjs doesn’t know about the slide index when auto-playing the slider).

My suggestion is to port Swipe to a different core file designed for Angular.js. However, the integration I made works - just include angular.swipe.js before your custom app, given Swipe is already loaded as a global on the page.

Markup

<swipe-wrap>
  <swipe-slider data-options="Demo1.sliderConfig">
    <swipe-item>...</swipe-item>
    <swipe-item>...</swipe-item>
    <swipe-item>...</swipe-item>
  </swipe-slider>
  <!-- Other slide-related directives go here -->
</swipe-wrap>

<!-- Include the following scripts in the correct order before defining your app -->
<script src="angular.js"></script>
<script src="swipe.js"></script>
<script src="angular.swipe.js"></script>

Javascript

angular
  .module('myApp', ['swipe']) // require the swipe module
  .controller('DemoController', DemoController);

// Attach the app onto the document body
// Alternatively, use the directive form of the bootstrap function
angular.bootstrap(document.getElementsByTagName('body')[0], ['myApp']);

function DemoController() {
  var Demo = this;
  // Add an options object to your application controller
  Demo.sliderConfig = {
    startSlide: 0,
    speed: 400,
    auto: 3000,
    draggable: false,
    continuous: true,
    disableScroll: false,
    stopPropagation: false,
    callback: function(index, elem) {},
    transitionEnd: function(index, elem) {}
  };
}

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
maxfahlcommented, May 30, 2017

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

0reactions
loup-bruncommented, Oct 19, 2015

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Miscellaneous: Version Support Status - AngularJS: API
AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement.
Read more >
Discontinued Long Term Support for AngularJS - Angular Blog
In January of 2018 we laid out our plans for the final releases of AngularJS before entering long-term support and last year, we...
Read more >
Extended Long-term Support for AngularJS - XLTS
Our AngularJS experts are here to help you identify the best path forward to support your AngularJS projects. Google's support for AngularJS has...
Read more >
AngularJS Long-Term Support | OpenLogic by Perforce
Get expert, SLA-backed support for your AngularJS deployments through 2023 with long-term AngularJS support from OpenLogic.
Read more >
AngularJS End of Life and What Does It Mean? - Existek Blog
The Google team stopped supporting AngularJS after the 31st of December, 2021. And even during the Long Term Support period, it was mainly ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found