Akira Dawson Akira Dawson - 4 days ago 6
HTML Question

Load jQuery plugin on specific pages in Angular JS

Got myself into a pickle with Angular JS. While I somewhat love it, I don't understand it enough to make full use of it yet. I would appreciate some help.
The goal:
Load jQuery Plugin Liquid Slider only on the home page.

What's being used on index.html page (snippet):

<head>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app-dev.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>

<!-- For Liquid Slider -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="js/liquid-slider/js/jquery.liquid-slider.min.js"></script>
<script>
//Bit of a no no from what i've read
setTimeout(function(){
$('#slider-1').liquidSlider({
autoSlide: true,
autoSlideInterval: 1500,
dynamicArrows: true
});
console.log('success!');
}, 500);
</script>
</head>
<body ng-app="app">
//stuff
<ng-view autoscroll="true" class="main-show"></ng-view>
</body>


js/app-dev.js shows:

var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/home', {
templateUrl : 'views/home-dev.html',
})
.otherwise('/home');
});


Currently liquid slider is being called on every page. Looking at the jquery code, it looks like it's running, but no sliding action is happening, I have isolated this by running the liquid slider on its on page with no Angular and it works fine. I am lead to believe I have implemented something incorrectly. Any guidance would be greatly appreciated.

-- update --
I've been looking into directives and got something working

app.directive('mySlider', function() {
return {
link: function(scope, element){
$('#slider-1').liquidSlider({
autoSlide: true,
autoSlideInterval: 1500,
forceAutoSlide:true,
dynamicArrows: true,
minHeight: 10,
});

}
};
});


although that work, I don't think it's the correct way.

Answer

Using a directive is a great way to go because you can attach the slider to any specific element you want. However, your directive has the "slider-1" ID hard-coded. You want that to be dynamic so you can attach it to any element:

app.directive('mySlider', function() {
  return {
    link: function(scope, element){
                 $(element).liquidSlider({
                    autoSlide: true,
                    autoSlideInterval: 1500,
                    forceAutoSlide:true,
                    dynamicArrows: true,
                    minHeight: 10,
                });
      }
  };
});

This will initiate the liquid slider on the HTML element that has a my-slider attribute, like this:

<div my-slider>Test contents</div>

You can even go further and make the other liquid slider attributes dynamic like this:

app.directive('mySlider', function() {
  return {
    link: function(scope, element, attrs){
                 $(element).liquidSlider({
                    autoSlide: attrs.autoSlide==="true",
                    autoSlideInterval: autoSlideInterval,
                    forceAutoSlide: attrs.forceAutoSlide==="true",
                    dynamicArrows: attrs.dynamicArrows==="true",
                    minHeight: attrs.minHeight,
                });
      }
  };
});

And set these dynamic options like this in your HTML:

<div my-slider auto-slide="true" auto-slide-interval="1500" 
    force-auto-slide="true" dynamic-arrows="true" min-height="10">Test contents</div>
Comments