Question

我正在使用滑块https://github.com/danielcrisp/angular-rangeslider

我的问题是如何在滑块停止时调用控制器功能，例如

<div range-slider min="0" max="100" model-min="min" model-max="max"></div>

那么当滑块停止时如何绑定此滑块中的事件？

我找到类似这样的东西

scopeOptions = {
                    disabled: '=?',
                    min: '=',
                    max: '=',
                    modelMin: '=?',
                    modelMax: '=?',
                    onHandleDown: '&', // calls optional function when handle is grabbed
                    onHandleUp: '&', // calls optional function when handle is released
                    orientation: '@', // options: horizontal | vertical | vertical left | vertical right
                    step: '@',
                    decimalPlaces: '@',
                    filter: '@',
                    filterOptions: '@',
                    showValues: '@',
                    pinHandle: '@',
                    preventEqualMinMax: '@',
                    attachHandleValues: '@'
                };

Answer 1

您有选项作为您的问题，在那里您可以找到名为onHandleUp的内容，并将其描述为calls optional function when handle is released。因此，如果您将一个函数传递给此选项，则滑块停止时将调用该函数。

代表：

添加on-handle-up选项，

<div range-slider min="0" max="100" model-min="demo1.min" model-max="demo1.max" on-handle-up="sliderStops()"></div>

在控制器中创建sliderStops()函数，

 $scope.sliderStops = function() {
  alert("slider stops.");
}

这是 Demo Plunker

如果您需要在滑块启动时使用onHandleDown选项来调用函数，则与onHandleUp相同。

<div range-slider min="0" max="100" model-min="demo1.min" model-max="demo1.max" on-handle-up="sliderStops()" on-handle-down="sliderStats()"></div>

$scope.sliderStats = function() {
    console.log("slider starts.");
}

这是 Demo Plunker 。打开控制台并滑动并检查控制台输出。

滑块在angular-rangeslider中停止时如何调用函数

1 个答案: