Added demo for directive in custom template (#366)

demo.js

@@ -10,6 +10,20 @@ app.directive('showCode', function() {
   };
 });
 
+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);
+      };
+    }
+  };
+});
+
 app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
   //Minimal slider config
   $scope.minSlider = {
@@ -236,6 +250,16 @@ 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',

directive-in-custom-template.html

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

index.html

@@ -226,6 +226,27 @@
     </tabset>
   </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="directive-in-custom-template.html"
+    ></rzslider>
+    <tabset class="code">
+      <tab heading="HTML">
+        <div hljs hljs-include="'snippets/directive_in_custom_template.html'" hljs-language="html"></div>
+      </tab>
+      <tab heading="JS">
+        <div hljs hljs-include="'snippets/directive_in_custom_template.js'" hljs-language="js"></div>
+      </tab>
+      <tab heading="directive-in-custom-template.html">
+        <div hljs hljs-include="'directive-in-custom-template.html'" hljs-language="html"></div>
+      </tab>
+    </tabset>
+  </article>
+
   <article>
     <h2>Slider with Alphabet</h2>
     Current letter: {{ slider_alphabet.value }}

snippets/directive_in_custom_template.html

+<rzslider rz-slider-model="slider.minValue"
+          rz-slider-high="slider.maxValue"
+          rz-slider-options="slider.options"
+          rz-slider-tpl-url="directive-in-custom-template.html"></rzslider>

snippets/directive_in_custom_template.js

+$scope.slider = {
+  minValue: 20,
+  maxValue: 80,
+  options: {
+    floor: 0,
+    ceil: 100
+  }
+};
\ No newline at end of file