angular-slider · ValentinH · Jul 9, 2016 · Jul 9, 2016 · ValentinH · Jul 9, 2016
diff --git a/README.md b/README.md
@@ -173,7 +173,18 @@ $scope.slider = {
 
 **rz-slider-tpl-url**
 
-> If for some reason you need to use a custom template, you can do so by providing a template URL to the `rz-slider-tpl-url` attribute. The default template is [this one](https://github.com/angular-slider/angularjs-slider/blob/master/src/rzSliderTpl.html).
+> If you need to use a custom template, you can do so by providing a template URL to the `rz-slider-tpl-url` attribute. The default template is [this one](https://github.com/angular-slider/angularjs-slider/blob/master/src/rzSliderTpl.html).
+
+The following variables are available in the template as scope variables.
+- `floorLabel`: The value set to `floor` in `rz-slider-options`
+- `ceilLabel`: The value set to `ceil` in `rz-slider-options`
+- `modelLabel`: The value set to `rz-slider-model`
+- `highLabel`: The value set to `rz-slider-high`
+- `cmbLabel`: The text shown when the two handlers are close to each other. (e.g. "30-40")
+
+The library replaces the HTML contents of label elements in the template by default, if you want to stop this behaviour and tweak label HTML on your own, you need to set `no-label-injection` class on the elements you're customizing.
+
+See the [Custom template to use angular directive for label](./demo/directiveInCustomTemplate.html) for an example.
 
 **rz-slider-options**
 

diff --git a/demo/demo.js b/demo/demo.js
@@ -207,6 +207,15 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
       }
     }
   };
+  //Slider config with angular directive inside custom template
+  $scope.slider_custom_directive_inside_template = {
+    minValue: 20,
+    maxValue: 80,
+    options: {
+      floor: 0,
+      ceil: 100
+    }
+  };
 
   //Slider config with steps array of letters
   $scope.slider_alphabet = {
@@ -515,3 +524,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   }
 });
+
+app.directive('clickableLabel', function() {
+  return {
+    restrict: 'E',
+    scope: {label: '='},
+    replace: true,
+    template: "<button ng-click='onclick(label)' style='cursor: pointer;'>click me - {{label}}</button>",
+    link: function(scope, elem, attrs){
+      scope.onclick = function(label){
+        alert("I'm " + label);
+      };
+    }
+  };
+});
diff --git a/demo/directiveInCustomTemplate.html b/demo/directiveInCustomTemplate.html
@@ -0,0 +1,23 @@
+<div class="rzslider">
+  <span class="rz-bar-wrapper"><span class="rz-bar"></span></span>
+    <span class="rz-bar-wrapper">
+      <span class="rz-bar rz-selection" ng-style="barStyle"></span>
+    </span>
+  <span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span>
+  <span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span>
+  <span class="rz-bubble rz-limit rz-floor no-label-injection">{{floorLabel}}</span>
+  <span class="rz-bubble rz-limit rz-ceil no-label-injection">{{ceilLabel}}</span>
+  <span class="rz-bubble no-label-injection"><clickable-label label="modelLabel" /></span>
+  <span class="rz-bubble no-label-injection"><clickable-label label="highLabel" /></span>
+    <span class="rz-bubble no-label-injection">
+      <clickable-label label="modelLabel"/>
+        -
+      <clickable-label label="highLabel"/>
+    </span>
+  <ul ng-show="showTicks" class="rz-ticks">
+    <li ng-repeat="t in ticks track by $index" class="rz-tick" ng-class="{'rz-selected': t.selected}" ng-style="t.style" ng-attr-uib-tooltip="{{ t.tooltip }}" ng-attr-tooltip-placement="{{t.tooltipPlacement}}" ng-attr-tooltip-append-to-body="{{ t.tooltip ? true : undefined}}">
+      <span ng-if="t.value != null" class="rz-tick-value" ng-attr-uib-tooltip="{{ t.valueTooltip }}" ng-attr-tooltip-placement="{{t.valueTooltipPlacement}}">{{ t.value }}</span>
+      <span ng-if="t.legend != null" class="rz-tick-legend">{{ t.legend }}</span>
+    </li>
+  </ul>
+</div>
diff --git a/demo/index.html b/demo/index.html
@@ -157,6 +157,16 @@ <h2>Slider with custom display function using html formatting</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with angular directive inside custom template</h2>
+    <rzslider
+            rz-slider-model="slider_custom_directive_inside_template.minValue"
+            rz-slider-high="slider_custom_directive_inside_template.maxValue"
+            rz-slider-options="slider_custom_directive_inside_template.options"
+            rz-slider-tpl-url="directiveInCustomTemplate.html"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with Alphabet</h2>
     Current letter: {{ slider_alphabet.value }}

diff --git a/dist/rzslider.css b/dist/rzslider.css
@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.2.0 - 
  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-07-07 */
+ 2016-07-09 */
 .rzslider {
   position: relative;
   display: inline-block;

diff --git a/dist/rzslider.js b/dist/rzslider.js
@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.2.0 - 
  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-07-07 */
+ 2016-07-09 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -774,7 +774,8 @@
         useCustomTr = useCustomTr === undefined ? true : useCustomTr;
 
         var valStr = '',
-          getDimension = false;
+          getDimension = false,
+          noLabelInjection = label.hasClass('no-label-injection');
 
         if (useCustomTr) {
           if (this.options.stepsArray && !this.options.bindIndexForStepsArray)
@@ -790,7 +791,9 @@
           label.rzsv = valStr;
         }
 
-        label.html(valStr);
+        if(!noLabelInjection){ label.html(valStr); };
+
+        this.scope[which + 'Label'] = valStr;
 
         // Update width only when length of the label have changed
         if (getDimension) {

diff --git a/dist/rzslider.min.css b/dist/rzslider.min.css
diff --git a/dist/rzslider.min.js b/dist/rzslider.min.js
diff --git a/karma.conf.js b/karma.conf.js
@@ -17,6 +17,7 @@ module.exports = function (config) {
       'src/*.js',
       'tests/specs/helper.js',
       'tests/specs/**/*-test.js',
+      'tests/specs/*.html',
       'dist/rzslider.css',
       'src/*.html'
     ],
@@ -27,7 +28,8 @@ module.exports = function (config) {
     // preprocess matching files before serving them to the browser
     preprocessors: {
       "src/*.js": ['coverage'],
-      "src/*Tpl.html": 'ng-html2js'
+      "src/*Tpl.html": 'ng-html2js',
+      "tests/specs/*-tpl.html": 'ng-html2js'
     },
 
     ngHtml2JsPreprocessor: {

diff --git a/src/rzslider.js b/src/rzslider.js
@@ -778,7 +778,8 @@
         useCustomTr = useCustomTr === undefined ? true : useCustomTr;
 
         var valStr = '',
-          getDimension = false;
+          getDimension = false,
+          noLabelInjection = label.hasClass('no-label-injection');
 
         if (useCustomTr) {
           if (this.options.stepsArray && !this.options.bindIndexForStepsArray)
@@ -794,7 +795,9 @@
           label.rzsv = valStr;
         }
 
-        label.html(valStr);
+        if(!noLabelInjection){ label.html(valStr); };
+
+        this.scope[which + 'Label'] = valStr;
 
         // Update width only when length of the label have changed
         if (getDimension) {

diff --git a/tests/specs/custom-template-test.js b/tests/specs/custom-template-test.js
@@ -0,0 +1,70 @@
+(function() {
+  "use strict";
+
+  describe('Custom templates - ', function() {
+    var helper,
+      RzSliderOptions,
+      $rootScope,
+      $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    var url = 'tests/specs/custom-tpl.html';
+
+    it('should render ceil/floor labels', function() {
+      var sliderConf = {
+        min: 10,
+        max: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10
+        }
+      };
+      helper.createRangeSliderWithCustomTemplate(sliderConf, url);
+      expect(helper.slider.flrLab.text()).to.equal('test- 0');
+      expect(helper.slider.ceilLab.text()).to.equal('test- 100');
+    });
+
+    it('should render min/max labels', function() {
+      var sliderConf = {
+        min: 10,
+        max: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10
+        }
+      };
+      helper.createRangeSliderWithCustomTemplate(sliderConf, url);
+      expect(helper.slider.minLab.text()).to.equal('test- 10');
+      expect(helper.slider.maxLab.text()).to.equal('test- 50');
+    });
+
+    it('should render min/max labels', function() {
+      var sliderConf = {
+        min: 50,
+        max: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10
+        }
+      };
+      helper.createRangeSliderWithCustomTemplate(sliderConf, url);
+      expect(helper.slider.cmbLab.text()).to.equal('test- 50 - 50');
+    });
+
+  });
+}());
diff --git a/tests/specs/custom-tpl.html b/tests/specs/custom-tpl.html
@@ -0,0 +1,19 @@
+<div class="rzslider">
+  <span class="rz-bar-wrapper"><span class="rz-bar"></span></span>
+    <span class="rz-bar-wrapper">
+      <span class="rz-bar rz-selection" ng-style="barStyle"></span>
+    </span>
+  <span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span>
+  <span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span>
+  <span class="rz-bubble rz-limit rz-floor no-label-injection">test- {{floorLabel}}</span>
+  <span class="rz-bubble rz-limit rz-ceil no-label-injection">test- {{ceilLabel}}</span>
+  <span class="rz-bubble no-label-injection">test- {{modelLabel}}</span>
+  <span class="rz-bubble no-label-injection">test- {{highLabel}}</span>
+  <span class="rz-bubble no-label-injection">test- {{cmbLabel}}</span>
+  <ul ng-show="showTicks" class="rz-ticks">
+    <li ng-repeat="t in ticks track by $index" class="rz-tick" ng-class="{'rz-selected': t.selected}" ng-style="t.style" ng-attr-uib-tooltip="{{ t.tooltip }}" ng-attr-tooltip-placement="{{t.tooltipPlacement}}" ng-attr-tooltip-append-to-body="{{ t.tooltip ? true : undefined}}">
+      <span ng-if="t.value != null" class="rz-tick-value" ng-attr-uib-tooltip="{{ t.valueTooltip }}" ng-attr-tooltip-placement="{{t.valueTooltipPlacement}}">{{ t.value }}</span>
+      <span ng-if="t.legend != null" class="rz-tick-legend">{{ t.legend }}</span>
+    </li>
+  </ul>
+</div>
diff --git a/tests/specs/helper.js b/tests/specs/helper.js
@@ -31,6 +31,20 @@
       h.initSlider(sliderObj, template);
     };
 
+    h.createRangeSliderWithCustomTemplate = function(sliderObj, templateUrl) {
+      var template = '';
+      var optionsExpression = sliderObj.optionsExpression || 'slider.options';
+      if (sliderObj.options || sliderObj.optionsExpression)
+        template = '<rzslider rz-slider-model="slider.min"' +
+          ' rz-slider-high="slider.max"' +
+          ' rz-slider-options="' + optionsExpression +
+          '" rz-slider-tpl-url="' + templateUrl +
+          '"></rzslider>';
+      else
+        template = '<rzslider rz-slider-model="slider.min" rz-slider-high="slider.max"></rzslider>';
+      h.initSlider(sliderObj, template);
+    };
+
     h.initSlider = function(sliderObj, template) {
       h.scope = $rootScope.$new();
       h.scope.slider = sliderObj;