We want to integrate a third-party plug-in, with our AngularJS app using ngModelController. Let’s first create an AngularJS module.
angular.module(“myApp”, [])
Now, let’s create a controller with a variable on its scope that is ‘slideNumber ‘.
.controller(“myController”, function($scope) {
$scope.slideNumber = 3;
})
Next step is to write HTML and bind the controller variable with an input control using ng-model directive.
<input type=”number” ng-model=”slideNumber”>
So far so good, now let’s talk about the third-party plug-in we want to use that is JQuery’s slick carousel, here is what slick carousel looks like:
It’s basically a carousel where we can have slides and change them using right and left arrows. Let us add slick carousel to our page
- Download slick.css and slick.js files from http://kenwheeler.github.io/slick/
- Add slick.css in thetag.
- Add slick.js before your closingtag.
- Initialize your slider in your script file or an inline script tag
$(document).ready(function(){
$('.your-class').slick(
{ setting-name: setting-value }
); });
Here is the HTML code for creating an instance of the slick carousel.
<div class=”carousel” ng-model=”slideNumber” >
<div>
<h3>0th Slide </h3>
</div>
<div>
<h3>1st Slide </h3>
</div>
</div>
We are just adding ng-model directive on the carousel elment.
You can refer to below url as well on how to add slick carousel in your page:
http://kenwheeler.github.io/slick/
We want to integrate this plug-in with our input control that is
- When user enters/changes number in the input control, slide of that number should get selected in the carousel.
- When user changes slide on slick carousel, our input control should have the number of the selected slide.
To achieve this we need to get hold of ngModelController of the directive ng-model used on our input control, for this we need to define a custom directive, here is the code:
.directive(“myDirective”, function() {
return {
}
});
We have defined a directive with name “myDirective” with its DDF – directive defination function returning an empty object , now to get ngModelController we need to ‘require’ it that is we need to add ‘require’ property to the object which we returned from DDF.
require: “ngModel”
Next step is to add the link function.
link: function(scope, e, a, ngModelController) {
}
As you noticed the fourth argument in the link function is the instance of ngModelController which we had ‘required’ in the above step.
Now, let us integrate the slick carousel with our input, write code for first part of the integration that is
- When user enters/changes number in the input control, slide of that number should get selected in the carousel.
Here is the code
ngModelController.$render = function() {
$(‘.carousel’).slick(‘slickGoTo’, ngModelController.$modelValue, true);
};
So, here we are implementing ‘$render’ function of ‘ngModelController’, this method is responsible to update the slick carousel with the data entered in the control bound with ng-model and it does so by this line of code
$(‘.carousel’).slick(‘slickGoTo’, ngModelController.$modelValue, true);
So here:
- We are getting the carousel element using $(‘.carousel’).
- We are calling ‘slickGoTo’ method of slick carousel.
- And we are asking ‘slickGoTo’ to select ‘ngModelController.$modelValue’ slide. ‘$modelValue’ gives us the value entered by user in out input control.
Now the second part of our integration that is
- When user changes slide on slick carousel, our input control should have the number of the selected slide.
Here is the code to do this:
$(‘.carousel’).on(‘afterChange’, function(event, slick, currentSlide, nextSlide) {
ngModelController.$setViewValue(currentSlide);
});
We are using ‘afterChange’ method of slick carousel, this method is called whenever user changes slide. We are calling ‘$setViewValue’ method of ngModelController, this method will set the value provided on the input control, we just need to pass ‘currentSlide’ value which we recieved as an argument of ‘afterChange’ hook.
So the DDF after adding above code should look like:
.directive(“myDirective”, function() {
return {
require: “ngModel”,
link: function(scope, e, a, ngModelController) {
ngModelController.$render = function() {
$(‘.carousel’).slick(‘slickGoTo’, ngModelController.$modelValue, true);
};
$(‘.carousel’).on(‘afterChange’, function(event, slick, currentSlide, nextSlide) {
ngModelController.$setViewValue(currentSlide);
});
}
};
});
Lets us create an instance of our directive in HTML and add ng-model directive on it.
With this we have successfully integrated slick carousel with our input control.
This is our output page.
Here is the fully working plunk for the this:
slick carousel integrated with AngularJS app using ngModelController
Tech Bytes 