I'm trying to initialise the Slick Slider Carousel in to my AngularJS App.
I got it working to an extent with a Directive I created called slickSlider (code below). The issue is it only works if I add the markup for the slider directly to the html template, not if I'm fetching the markup from an external service which uses promises/deferred to only get the data when it's required.
When I place break points on the chrome sources panel I see that the slickSlider directive code is being run before the Controller gets the data from the service, so the directive code has no effect.
I replicated the issue in a scaled down version of my app in the snippit below.
- How can I get the directive to initialise the slider after the service has gotten the data for the controller and it has been passed to the view?
- Should I try initialising the slider in another way?
var app = angular.module('app', ['ngSanitize']);
app.controller('postsController', ['postsService', function (postsService) {
var postsCtrl = this;
postsCtrl.test = 'this is an expression from the controller'
var promise = postsService.getPost(1);
promise.then(function (data)
{
postsCtrl.data = data.data;
// I can't access the API on SO so am replicating what I would get from it here.
postsCtrl.slider = '<div class=\"slick-slider\">\n \n <div>Service Slide 1<\/div>\n \n <div>Service Slide 2<\/div>\n \n <div>Service Slide 3<\/div>\n \n <\/div>';
});
}]);
app.service("postsService", function ($http, $q) {
function getPost(postsId) {
var deferred = $q.defer()
var url = 'https://jsonplaceholder.typicode.com/albums/' + postsId;
$http({
method: 'GET', // GET OPTIONS
cache: true,
url: url,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}).
then(function(response) {
//your code when success
deferred.resolve(response);
}, function(response) {
//your code when fails
deferred.reject(response);
});
return deferred.promise;
}
this.getPost = getPost;
});
app.directive('slickSlider',function(){
return {
restrict: 'C',
link: function(scope, elem, attrs) {
$(elem).slick({
// settings
});
}
}
});body {
font-family: sans-serif;
font-size: 14px;
}
h1 {
font-size: 15px;
margin: 20px 0 2px;
}<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-sanitize.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<body ng-app="app" ng-controller="postsController as postsCtrl">
Controller is working... <i>{{postsCtrl.test}}</i> <br />
Service is working... <i>{{postsCtrl.data.title}}</i>
<h1>Slider Carousel markup from simple HTML</h1>
<div class="slick-slider">
<div>HTML Slide 1</div>
<div>HTML Slide 2</div>
<div>HTML Slide 3</div>
</div>
<h1>Slider Carousel markup from expression supplied by Service</h1>
<div ng-bind-html="postsCtrl.slider"></div>
</body>UPDATE
I tried using $timeout in my directive but it didn't work!
app.directive('slickSlider',function($timeout){
return {
restrict: 'C',
link: function(scope, elem, attrs) {
$timeout(function () {
$(elem).slick({
// settings
});
});
}
}
});
You need to recompile the element after the
postsCtrl.slidervalue has changed.