priyanka.sarkar priyanka.sarkar - 1 year ago 102
AngularJS Question

Please provide me explanation for the Slider directive

Can anyone please explain the Slider directive provided here

myApp.directive('slider', function() {
return {
restrict: 'A',
scope: {
ngModel: '='
link: function(scope, elem, attrs) {


return $(elem).slider({
range: "min",
animate: true,
value: scope.ngModel,
slide: function(event, ui) {
return scope.$apply(function(){
scope.ngModel = ui.value;

Like purpose of
ngmodel, range, animate, value:scope.ngModel
etc. I have read some article about the same from here but this seems to be a little complicate for me.

Thanks in advance.

Answer Source

This is a typical isolated scope directive configuration that is using a jQuery plugin .

scope.ngModel is passed in to the directive through the matching attribute ng-model in the html.

The '=' makes it a 2 way binding to it's parent.

As for the slider it is a jQuery UI slider and the options like animate and range etc are documented in their API

$apply() is used whenever events outside of angular context are used to modify scope. Angular needs to be told to run a digest to update the view

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download