Skip to content

Commit dbf7725

Browse files
LioooValentinH
Liooo
authored and
ValentinH
committed
expose label texts on scope vairable (angular-slider#358)
1 parent 9a9db3e commit dbf7725

13 files changed

+189
-11
lines changed

‎README.md

+12-1
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,18 @@ $scope.slider = {
173173
174174
**rz-slider-tpl-url**
175175

176-
> 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).
176+
> 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).
177+
178+
The following variables are available in the template as scope variables.
179+
- `floorLabel`: The value set to `floor` in `rz-slider-options`
180+
- `ceilLabel`: The value set to `ceil` in `rz-slider-options`
181+
- `modelLabel`: The value set to `rz-slider-model`
182+
- `highLabel`: The value set to `rz-slider-high`
183+
- `cmbLabel`: The text shown when the two handlers are close to each other. (e.g. "30-40")
184+
185+
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.
186+
187+
See the [Custom template to use angular directive for label](./demo/directiveInCustomTemplate.html) for an example.
177188

178189
**rz-slider-options**
179190

‎demo/demo.js

+23
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,15 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
207207
}
208208
}
209209
};
210+
//Slider config with angular directive inside custom template
211+
$scope.slider_custom_directive_inside_template = {
212+
minValue: 20,
213+
maxValue: 80,
214+
options: {
215+
floor: 0,
216+
ceil: 100
217+
}
218+
};
210219

211220
//Slider config with steps array of letters
212221
$scope.slider_alphabet = {
@@ -515,3 +524,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
515524
}
516525
}
517526
});
527+
528+
app.directive('clickableLabel', function() {
529+
return {
530+
restrict: 'E',
531+
scope: {label: '='},
532+
replace: true,
533+
template: "<button ng-click='onclick(label)' style='cursor: pointer;'>click me - {{label}}</button>",
534+
link: function(scope, elem, attrs){
535+
scope.onclick = function(label){
536+
alert("I'm " + label);
537+
};
538+
}
539+
};
540+
});

‎demo/directiveInCustomTemplate.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="rzslider">
2+
<span class="rz-bar-wrapper"><span class="rz-bar"></span></span>
3+
<span class="rz-bar-wrapper">
4+
<span class="rz-bar rz-selection" ng-style="barStyle"></span>
5+
</span>
6+
<span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span>
7+
<span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span>
8+
<span class="rz-bubble rz-limit rz-floor no-label-injection">{{floorLabel}}</span>
9+
<span class="rz-bubble rz-limit rz-ceil no-label-injection">{{ceilLabel}}</span>
10+
<span class="rz-bubble no-label-injection"><clickable-label label="modelLabel" /></span>
11+
<span class="rz-bubble no-label-injection"><clickable-label label="highLabel" /></span>
12+
<span class="rz-bubble no-label-injection">
13+
<clickable-label label="modelLabel"/>
14+
-
15+
<clickable-label label="highLabel"/>
16+
</span>
17+
<ul ng-show="showTicks" class="rz-ticks">
18+
<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}}">
19+
<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>
20+
<span ng-if="t.legend != null" class="rz-tick-legend">{{ t.legend }}</span>
21+
</li>
22+
</ul>
23+
</div>

‎demo/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,16 @@ <h2>Slider with custom display function using html formatting</h2>
157157
></rzslider>
158158
</article>
159159

160+
<article>
161+
<h2>Slider with angular directive inside custom template</h2>
162+
<rzslider
163+
rz-slider-model="slider_custom_directive_inside_template.minValue"
164+
rz-slider-high="slider_custom_directive_inside_template.maxValue"
165+
rz-slider-options="slider_custom_directive_inside_template.options"
166+
rz-slider-tpl-url="directiveInCustomTemplate.html"
167+
></rzslider>
168+
</article>
169+
160170
<article>
161171
<h2>Slider with Alphabet</h2>
162172
Current letter: {{ slider_alphabet.value }}

‎dist/rzslider.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v5.2.0 -
22
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-07-07 */
4+
2016-07-09 */
55
.rzslider {
66
position: relative;
77
display: inline-block;

‎dist/rzslider.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v5.2.0 -
22
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-07-07 */
4+
2016-07-09 */
55
/*jslint unparam: true */
66
/*global angular: false, console: false, define, module */
77
(function(root, factory) {
@@ -774,7 +774,8 @@
774774
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
775775

776776
var valStr = '',
777-
getDimension = false;
777+
getDimension = false,
778+
noLabelInjection = label.hasClass('no-label-injection');
778779

779780
if (useCustomTr) {
780781
if (this.options.stepsArray && !this.options.bindIndexForStepsArray)
@@ -790,7 +791,9 @@
790791
label.rzsv = valStr;
791792
}
792793

793-
label.html(valStr);
794+
if(!noLabelInjection){ label.html(valStr); };
795+
796+
this.scope[which + 'Label'] = valStr;
794797

795798
// Update width only when length of the label have changed
796799
if (getDimension) {

‎dist/rzslider.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rzslider.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎karma.conf.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ module.exports = function (config) {
1717
'src/*.js',
1818
'tests/specs/helper.js',
1919
'tests/specs/**/*-test.js',
20+
'tests/specs/*.html',
2021
'dist/rzslider.css',
2122
'src/*.html'
2223
],
@@ -27,7 +28,8 @@ module.exports = function (config) {
2728
// preprocess matching files before serving them to the browser
2829
preprocessors: {
2930
"src/*.js": ['coverage'],
30-
"src/*Tpl.html": 'ng-html2js'
31+
"src/*Tpl.html": 'ng-html2js',
32+
"tests/specs/*-tpl.html": 'ng-html2js'
3133
},
3234

3335
ngHtml2JsPreprocessor: {

‎src/rzslider.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -778,7 +778,8 @@
778778
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
779779

780780
var valStr = '',
781-
getDimension = false;
781+
getDimension = false,
782+
noLabelInjection = label.hasClass('no-label-injection');
782783

783784
if (useCustomTr) {
784785
if (this.options.stepsArray && !this.options.bindIndexForStepsArray)
@@ -794,7 +795,9 @@
794795
label.rzsv = valStr;
795796
}
796797

797-
label.html(valStr);
798+
if(!noLabelInjection){ label.html(valStr); };
799+
800+
this.scope[which + 'Label'] = valStr;
798801

799802
// Update width only when length of the label have changed
800803
if (getDimension) {

‎tests/specs/custom-template-test.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
(function() {
2+
"use strict";
3+
4+
describe('Custom templates - ', function() {
5+
var helper,
6+
RzSliderOptions,
7+
$rootScope,
8+
$timeout;
9+
10+
beforeEach(module('test-helper'));
11+
12+
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
13+
helper = TestHelper;
14+
RzSliderOptions = _RzSliderOptions_;
15+
$rootScope = _$rootScope_;
16+
$timeout = _$timeout_;
17+
}));
18+
19+
afterEach(function() {
20+
helper.clean();
21+
});
22+
23+
var url = 'tests/specs/custom-tpl.html';
24+
25+
it('should render ceil/floor labels', function() {
26+
var sliderConf = {
27+
min: 10,
28+
max: 50,
29+
options: {
30+
floor: 0,
31+
ceil: 100,
32+
step: 10
33+
}
34+
};
35+
helper.createRangeSliderWithCustomTemplate(sliderConf, url);
36+
expect(helper.slider.flrLab.text()).to.equal('test- 0');
37+
expect(helper.slider.ceilLab.text()).to.equal('test- 100');
38+
});
39+
40+
it('should render min/max labels', function() {
41+
var sliderConf = {
42+
min: 10,
43+
max: 50,
44+
options: {
45+
floor: 0,
46+
ceil: 100,
47+
step: 10
48+
}
49+
};
50+
helper.createRangeSliderWithCustomTemplate(sliderConf, url);
51+
expect(helper.slider.minLab.text()).to.equal('test- 10');
52+
expect(helper.slider.maxLab.text()).to.equal('test- 50');
53+
});
54+
55+
it('should render min/max labels', function() {
56+
var sliderConf = {
57+
min: 50,
58+
max: 50,
59+
options: {
60+
floor: 0,
61+
ceil: 100,
62+
step: 10
63+
}
64+
};
65+
helper.createRangeSliderWithCustomTemplate(sliderConf, url);
66+
expect(helper.slider.cmbLab.text()).to.equal('test- 50 - 50');
67+
});
68+
69+
});
70+
}());

‎tests/specs/custom-tpl.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div class="rzslider">
2+
<span class="rz-bar-wrapper"><span class="rz-bar"></span></span>
3+
<span class="rz-bar-wrapper">
4+
<span class="rz-bar rz-selection" ng-style="barStyle"></span>
5+
</span>
6+
<span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span>
7+
<span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span>
8+
<span class="rz-bubble rz-limit rz-floor no-label-injection">test- {{floorLabel}}</span>
9+
<span class="rz-bubble rz-limit rz-ceil no-label-injection">test- {{ceilLabel}}</span>
10+
<span class="rz-bubble no-label-injection">test- {{modelLabel}}</span>
11+
<span class="rz-bubble no-label-injection">test- {{highLabel}}</span>
12+
<span class="rz-bubble no-label-injection">test- {{cmbLabel}}</span>
13+
<ul ng-show="showTicks" class="rz-ticks">
14+
<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}}">
15+
<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>
16+
<span ng-if="t.legend != null" class="rz-tick-legend">{{ t.legend }}</span>
17+
</li>
18+
</ul>
19+
</div>

‎tests/specs/helper.js

+14
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,20 @@
3131
h.initSlider(sliderObj, template);
3232
};
3333

34+
h.createRangeSliderWithCustomTemplate = function(sliderObj, templateUrl) {
35+
var template = '';
36+
var optionsExpression = sliderObj.optionsExpression || 'slider.options';
37+
if (sliderObj.options || sliderObj.optionsExpression)
38+
template = '<rzslider rz-slider-model="slider.min"' +
39+
' rz-slider-high="slider.max"' +
40+
' rz-slider-options="' + optionsExpression +
41+
'" rz-slider-tpl-url="' + templateUrl +
42+
'"></rzslider>';
43+
else
44+
template = '<rzslider rz-slider-model="slider.min" rz-slider-high="slider.max"></rzslider>';
45+
h.initSlider(sliderObj, template);
46+
};
47+
3448
h.initSlider = function(sliderObj, template) {
3549
h.scope = $rootScope.$new();
3650
h.scope.slider = sliderObj;

0 commit comments

Comments
 (0)