Refactor the ticks logic by using true angular power

dist/rzslider.js

@@ -376,6 +376,7 @@
         this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
         this.options.draggableRange = this.range && this.options.draggableRange;
         this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
+        this.scope.showTicks = this.options.showTicks; //scope is used in the template
 
         if (this.options.stepsArray) {
           this.options.floor = 0;
@@ -488,9 +489,6 @@
         this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
         this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
 
-        if (!this.options.showTicks)
-          this.ticks.html('');
-
         if (this.options.draggableRange)
           this.selBar.addClass('rz-draggable');
         else
@@ -657,28 +655,25 @@
        */
       updateTicksScale: function() {
         if (!this.options.showTicks) return;
-        if (!this.step) return; //if step is 0, the following loop will be endless.
+        if (!this.step) return; //if step is 0, we'll get a zero division
 
         var positions = '',
           ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
+        this.scope.ticks = [];
         for (var i = 0; i < ticksCount; i++) {
           var value = this.roundStep(this.minValue + i * this.step);
-          var selectedClass = this.isTickSelected(value) ? 'selected' : '';
-          positions += '<li class="tick ' + selectedClass + '">';
+          var tick = {
+            selected: this.isTickSelected(value)
+          };
           if (this.options.showTicksValues) {
-            var tooltip = '';
+            tick.value = this.getDisplayValue(value);
             if (this.options.ticksValuesTooltip) {
-              tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
-              if (this.options.vertical)
-                tooltip += ' tooltip-placement="right"'
+              tick.tooltip = this.options.ticksValuesTooltip(value);
+              tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
             }
-            positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
           }
-          positions += '</li>';
+          this.scope.ticks.push(tick);
         }
-        this.ticks.html(positions);
-        if (this.options.ticksValuesTooltip)
-          $compile(this.ticks.contents())(this.scope);
       },
 
       isTickSelected: function(value) {
@@ -1433,7 +1428,7 @@
   'use strict';
 
   $templateCache.put('rzSliderTpl.html',
-    "<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul class=rz-ticks></ul>"
+    "<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks\" class=tick ng-class=\"{selected: t.selected}\"><span ng-if=\"t.value != null && t.tooltip == null\" class=tick-value>{{ t.value }}</span> <span ng-if=\"t.value != null && t.tooltip != null\" class=tick-value uib-tooltip=\"{{ t.tooltip }}\" tooltip-placement={{t.tooltipPlacement}}>{{ t.value }}</span></li></ul>"
   );
 
 }]);

src/rzSliderTpl.html

@@ -7,4 +7,10 @@
 <span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->
 <span class="rz-bubble"></span> <!-- // 7 Label above right slider handle -->
 <span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
-<ul class="rz-ticks"></ul> <!-- // 9 The ticks -->
\ No newline at end of file
+<ul ng-show="showTicks" class="rz-ticks"> <!-- // 9 The ticks -->
+  <li ng-repeat="t in ticks" class="tick" ng-class="{selected: t.selected}">
+    <span ng-if="t.value != null && t.tooltip == null" class="tick-value">{{ t.value }}</span>
+    <span ng-if="t.value != null && t.tooltip != null" class="tick-value"
+      uib-tooltip="{{ t.tooltip }}" tooltip-placement="{{t.tooltipPlacement}}">{{ t.value }}</span>
+  </li>
+</ul>

src/rzslider.js

@@ -376,6 +376,7 @@
         this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
         this.options.draggableRange = this.range && this.options.draggableRange;
         this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
+        this.scope.showTicks = this.options.showTicks; //scope is used in the template
 
         if (this.options.stepsArray) {
           this.options.floor = 0;
@@ -488,9 +489,6 @@
         this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
         this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
 
-        if (!this.options.showTicks)
-          this.ticks.html('');
-
         if (this.options.draggableRange)
           this.selBar.addClass('rz-draggable');
         else
@@ -657,28 +655,25 @@
        */
       updateTicksScale: function() {
         if (!this.options.showTicks) return;
-        if (!this.step) return; //if step is 0, the following loop will be endless.
+        if (!this.step) return; //if step is 0, we'll get a zero division
 
         var positions = '',
           ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
+        this.scope.ticks = [];
         for (var i = 0; i < ticksCount; i++) {
           var value = this.roundStep(this.minValue + i * this.step);
-          var selectedClass = this.isTickSelected(value) ? 'selected' : '';
-          positions += '<li class="tick ' + selectedClass + '">';
+          var tick = {
+            selected: this.isTickSelected(value)
+          };
           if (this.options.showTicksValues) {
-            var tooltip = '';
+            tick.value = this.getDisplayValue(value);
             if (this.options.ticksValuesTooltip) {
-              tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
-              if (this.options.vertical)
-                tooltip += ' tooltip-placement="right"'
+              tick.tooltip = this.options.ticksValuesTooltip(value);
+              tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
             }
-            positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
           }
-          positions += '</li>';
+          this.scope.ticks.push(tick);
         }
-        this.ticks.html(positions);
-        if (this.options.ticksValuesTooltip)
-          $compile(this.ticks.contents())(this.scope);
       },
 
       isTickSelected: function(value) {