1

Hi All Thank you in advance.

I am faced with a task of converting an HTML and jQuery intensive website and make it work with AngularJs. The issue is that it has a lot of plug-ins like

  1. http://adnantopal.github.io/slimmenu
  2. https://github.com/inuyaksa/jquery.nicescroll
  3. http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/
  4. https://dev7studios.com/dropit/
  5. http://fitvidsjs.com/

They are loaded as follows on the HTML page

```
<script src="js/slimmenu.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/gridrotator.js"></script>
<script src="js/js/ionrangeslider.js"></script>
other scripts
```

Then there is a main.js file that is used to init the lib's in a section that is needed

E.G

````
// main.js

$(document).ready(function(){
  $('html').niceScroll({
      cursorcolor: "#000",
      cursorborder: "0px solid #fff",
      railpadding: {
        top: 0,
        right: 0,
        left: 0,
        bottom: 0
      },
      ....etc
  });
 owlCarouselSlider.owlCarousel({/*--code--*/});
});

$('div.bg-parallax').each(function(){/*//code*/});

$('input.time-pick').timepicker({
  minuteStep: 15,
  showInpunts: false
})

$('.form-group-cc-number input').payment('formatCardNumber');

$(function() {
  $('#ri-grid').gridrotator({})
});

````

The Issue

These plug-ins only work if your page is static and they do not work when I use them with AngularJs. I get errors like gridrotator is undefined

Question

How can I make the jQuery-plugin and other libraries be a module that I can use with Angular

Here is an example plnkr that I try to make.

But now do I put the original lib code on the Factory or Service providers in Angular?

Anele
  • 162
  • 1
  • 3
  • 21
  • 1
    DOM manipulation should be done in directives, not services or controllers. See [this answer](http://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angularjs) for more details. – Lex Mar 23 '16 at 15:15
  • Thank you @Lex this was great reference, I cant believe I missed it. Maybe I was too ambitions becouse I wanted to use [LazyLoading](https://github.com/ocombe/ocLazyLoad) – Anele Mar 26 '16 at 14:06

0 Answers0