feat(rzSliderOptions): Change rzSliderOptions to use expression binding

Switch from using two-way binding for rzSliderOptions to using expression binding. Using expression
binding enables more complex use cases such as using the return value of a function as an options
object.

Closes #265.

Author: Patrick Fiedler

dist/rzslider.css

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v2.8.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-02-09 */
+ 2016-02-16 */
 rzslider {
   position: relative;
   display: inline-block;

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v2.8.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-02-09 */
+ 2016-02-16 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -330,7 +330,7 @@
 
         // Watchers (order is important because in case of simultaneous change,
         // watchers will be called in the same order)
-        this.scope.$watch('rzSliderOptions', function(newValue, oldValue) {
+        this.scope.$watch('rzSliderOptions()', function(newValue, oldValue) {
           if (newValue === oldValue)
             return;
           self.applyOptions();
@@ -394,7 +394,13 @@
        * Read the user options and apply them to the slider model
        */
       applyOptions: function() {
-        this.options = RzSliderOptions.getOptions(this.scope.rzSliderOptions);
+        var sliderOptions;
+        if (this.scope.rzSliderOptions)
+          sliderOptions = this.scope.rzSliderOptions();
+        else
+          sliderOptions = {};
+
+        this.options = RzSliderOptions.getOptions(sliderOptions);
 
         if (this.options.step <= 0)
           this.options.step = 1;
@@ -1664,7 +1670,7 @@
       scope: {
         rzSliderModel: '=?',
         rzSliderHigh: '=?',
-        rzSliderOptions: '=?',
+        rzSliderOptions: '&?',
         rzSliderTplUrl: '@'
       },
 

dist/rzslider.min.css

@@ -334,7 +334,7 @@
 
         // Watchers (order is important because in case of simultaneous change,
         // watchers will be called in the same order)
-        this.scope.$watch('rzSliderOptions', function(newValue, oldValue) {
+        this.scope.$watch('rzSliderOptions()', function(newValue, oldValue) {
           if (newValue === oldValue)
             return;
           self.applyOptions();
@@ -398,7 +398,13 @@
        * Read the user options and apply them to the slider model
        */
       applyOptions: function() {
-        this.options = RzSliderOptions.getOptions(this.scope.rzSliderOptions);
+        var sliderOptions;
+        if (this.scope.rzSliderOptions)
+          sliderOptions = this.scope.rzSliderOptions();
+        else
+          sliderOptions = {};
+
+        this.options = RzSliderOptions.getOptions(sliderOptions);
 
         if (this.options.step <= 0)
           this.options.step = 1;
@@ -1668,7 +1674,7 @@
       scope: {
         rzSliderModel: '=?',
         rzSliderHigh: '=?',
-        rzSliderOptions: '=?',
+        rzSliderOptions: '&?',
         rzSliderTplUrl: '@'
       },
 

dist/rzslider.min.js

@@ -11,18 +11,21 @@
 
     h.createSlider = function(sliderObj) {
       var template = '';
-      if (sliderObj.options)
-        template = '<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>';
+      var optionsExpression = sliderObj.optionsExpression || 'slider.options';
+      if (sliderObj.options || sliderObj.optionsExpression)
+        template = '<rzslider rz-slider-model="slider.value" rz-slider-options="' +
+        optionsExpression + '"></rzslider>';
       else
         template = '<rzslider rz-slider-model="slider.value"></rzslider>';
       h.initSlider(sliderObj, template);
     };
 
     h.createRangeSlider = function(sliderObj) {
       var template = '';
-      if (sliderObj.options)
+      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="slider.options"></rzslider>';
+        'rz-slider-options="' + optionsExpression + '"></rzslider>';
       else
         template = '<rzslider rz-slider-model="slider.min" rz-slider-high="slider.max"></rzslider>';
       h.initSlider(sliderObj, template);

src/rzslider.js

@@ -481,6 +481,36 @@
         expect(helper.scope.slider.max).to.equal(100);
       });
     });
+
+    describe('options expression specific - ', function() {
+      it('should safely handle null expressions', function() {
+        var sliderConf = {
+          value: 10,
+          optionsExpression: 'thisDoesntExist'
+        };
+
+        helper.createSlider(sliderConf);
+        helper.scope.$digest();
+        expect(helper.slider.step).to.equal(1);
+      });
+
+      it('should not cause an infinite $digest loop with an expression that always returns a new object', function() {
+        var sliderConf = {
+          value: 10,
+          options: function() {
+            return {
+              floor: 1,
+              ceil: 1000
+            };
+          },
+          optionsExpression: 'slider.options()'
+        };
+
+        helper.createSlider(sliderConf);
+        helper.scope.$digest();
+        expect(helper.slider.minValue).to.equal(1);
+        expect(helper.slider.maxValue).to.equal(1000);
+      });
+    });
   });
 }());
-