Merge pull request #105 from JulianWielga/patch-3

better formatter

Author: seiyria

bower.json

@@ -22,7 +22,7 @@
     "tests"
   ],
   "dependencies": {
-    "seiyria-bootstrap-slider": "~5.2.6",
-    "angular": "~1.3.15||~1.4.7"
+    "seiyria-bootstrap-slider": ">= 5.2 < 6.0",
+    "angular": ">= 1.3 < 1.5"
   }
 }

slider.js

@@ -27,7 +27,7 @@ angular.module('ui.bootstrap-slider', [])
             link: function ($scope, element, attrs, ngModelCtrl, $compile) {
                 var ngModelDeregisterFn, ngDisabledDeregisterFn;
 
-                initSlider();
+                var slider = initSlider();
 
                 function initSlider() {
                     var options = {};
@@ -107,7 +107,11 @@ angular.module('ui.bootstrap-slider', [])
                         setFloatOption('value', $scope.value, 5);
                     }
 
-                    if ($scope.formatter) options.formatter = $scope.$eval($scope.formatter);
+                    if (attrs.formatter) {
+                        options.formatter = function(value) {
+                            return $scope.formatter({value: value});
+                        }
+                    }
 
 
                     // check if slider jQuery plugin exists
@@ -140,19 +144,18 @@ angular.module('ui.bootstrap-slider', [])
                     }
                     angular.forEach(updateEvent, function (sliderEvent) {
                         slider.on(sliderEvent, function (ev) {
-                            ngModelCtrl.$setViewValue(ev);
                             $timeout(function () {
-                                $scope.$apply();
+                                ngModelCtrl.$setViewValue(ev);
                             });
                         });
                     });
                     slider.on('change', function (ev) {
-                        ngModelCtrl.$setViewValue(ev.newValue);
                         $timeout(function () {
-                            $scope.$apply();
+                            ngModelCtrl.$setViewValue(ev.newValue);
                         });
                     });
 
+
                     // Event listeners
                     var sliderEvents = {
                         slideStart: 'onStartSlide',
@@ -164,15 +167,9 @@ angular.module('ui.bootstrap-slider', [])
                         slider.on(sliderEvent, function (ev) {
                             if ($scope[sliderEventAttr]) {
 
-                                var callback = function () {
+                                $timeout(function () {
                                     fn($scope.$parent, { $event: ev, value: ev });
-                                }
-
-                                if ($rootScope.$$phase) {
-                                    $scope.$evalAsync(callback);
-                                } else {
-                                    $scope.$apply(callback);
-                                }
+                                });
                             }
                         });
                     });
@@ -195,21 +192,30 @@ angular.module('ui.bootstrap-slider', [])
                     // deregister ngModel watcher to prevent memory leaks
                     if (angular.isFunction(ngModelDeregisterFn)) ngModelDeregisterFn();
                     ngModelDeregisterFn = $scope.$watch('ngModel', function (value) {
-                        if($scope.range){
-                            slider.setValue(value);
-                        }else{
-                            slider.setValue(parseFloat(value));
-                        }
+                        $timeout(function() {
+							if($scope.range){
+								slider.setValue(value);
+							}else{
+								slider.setValue(parseFloat(value));
+							}
+                            slider.relayout();
+                        });
                     }, true);
+
+                    return slider;
                 }
 
 
                 var watchers = ['min', 'max', 'step', 'range', 'scale'];
                 angular.forEach(watchers, function (prop) {
                     $scope.$watch(prop, function () {
-                        initSlider();
+                        slider = initSlider();
                     });
                 });
+
+                $scope.$on('slider:relayout', function() {
+                    slider.relayout();
+                });
             }
         };
     }])

test.html

@@ -14,9 +14,9 @@
         <input id="sliderId" type="text" ng-model="testOptions.sliderId">
 
         <label for="modelValue">Slider Value in ng-model:</label>
-        <input id="modelValue" type="range" ng-model="model.first" min="testOptions.min" step="testOptions.step"
-               max="testOptions.max">
-        <input type="number" ng-model="model.first" class="form-control">
+        <input id="modelValue" type="range" ng-model="model.first" min="{{testOptions.min}}" step="{{testOptions.step}}"
+               max="{{testOptions.max}}">
+        <input ng-model="model.first" class="form-control">
 
         <label for="value">Value:</label>
         <input id="value" type="number" ng-model="value.first" class="form-control">
@@ -71,7 +71,7 @@
             max="testOptions.max"
             step="testOptions.step"
             range="testOptions.range"
-            precision="testOptions.precision"
+            precision="{{ testOptions.precision }}"
             reversed="{{ testOptions.reversed }}"
             orientation="{{ testOptions.orientation }}"
             handle="{{ testOptions.handle }}"
@@ -122,14 +122,15 @@
 
         <label for="formatter_sufffix">Formatter suffix:</label>
         <input id="formatter_sufffix" type="text" ng-model="suffix" class="form-control">
+        <button ng-click="$broadcast('slider:relayout')">Relayout</button>
     </p>
 
     Slider with configurable tooltip<br>
     <slider slider-id="tooltipSlider"
             ng-model="model.third"
             precision="{{ testOptions.precision }}"
             tooltip="{{ testOptions.tooltip }}"
-            formatter="formatterFn"
+            formatter="formatterFn(value)"
             >
     </slider>
     Model: {{model.third}}<br>