wipo

Author: Liooo

README.md

@@ -1,4 +1,4 @@
-## AngularJS slider directive with no external dependencies
+e# AngularJS slider directive with no external dependencies
 
 Status:
 [![npm version](https://img.shields.io/npm/v/angularjs-slider.svg?style=flat-square)](https://www.npmjs.com/package/angularjs-slider)

demo/demo.js

@@ -208,6 +208,17 @@ 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 = {
     value: 'E',
@@ -515,3 +526,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);
+      };
+    }
+  };
+});

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 }}

dist/rzslider.css

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.2.0 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-07-07 */
+ 2016-07-09 */
 .rzslider {
   position: relative;
   display: inline-block;

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.2.0 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  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) {

dist/rzslider.min.css

@@ -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) {