角引導滑塊 - 關於停止執行功能

我已經創建滑蓋下面的代碼：角引導滑塊 - 關於停止執行功能

<html ng-app="angular-bootstrap-slider-test"> 
    <head> 
     <title>Angular Bootstrap Slider test</title> 
     <script data-require="[email protected]" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script> 
     <script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <link href="bootstrap.css" rel="stylesheet" /> 
     <link href="bootstrap-slider.css" rel="stylesheet" /> 
    </head> 

    <body ng-controller="TestCtrl"> 
     <div class="col-md-2 col-md-offset-2"> 
      <slider on-stop-slide="executeMe();" ng-model="sliders.sliderValue" min="{{testOptions.min}}" step="{{testOptions.step}}" max="{{testOptions.max}}"></slider> 
     {{myFormater(sliders.sliderValue)}} 
     </div> 

<script type="text/javascript" src="bootstrap-slider.js"></script> 
<!-- angular-slider include --> 
<script type="text/javascript" src="slider.js"></script> 
<!-- test file include --> 
<script src="app.js"> 
</script>

angular.module('angular-bootstrap-slider-test', ['ui.bootstrap-slider']) 
.controller('TestCtrl', ['$scope', function($scope) { 

    $scope.sliders = {}; 
    $scope.sliders.sliderValue = 50; 

    $scope.testOptions = { 
     min: 0, 
     max: 100, 
     step: 1, 
    }; 



    $scope.sliders.thirdSliderValue = 0; 
    $scope.myFormater = function(value) { 
     return value + "%"; 
    } 

    $scope.executeMe = function() { 
     console.log('done'); 
    } 
}]);

我嘗試沒有成功做的是在用戶完成移動滑塊時執行功能

這裏是plunker上的代碼：

http://plnkr.co/edit/iULltHh0fRAbvuoFu84t?p=preview

感謝配發

阿維

來源

2014-11-03 אVי

您可以使用ngMouseup了點。

<div class="col-md-2 col-md-offset-2" ng-mouseup="executeMe()"> 
    <slider ng-model="sliders.sliderValue" min="{{testOptions.min}}" step="{{testOptions.step}}" max="{{testOptions.max}}"></slider> 
     {{myFormater(sliders.sliderValue)}}  
</div>

這裏的your plunkr修改爲演示。

更新

一種不同的方法將是$watch滑塊的值。您可以設置超時時間，以便在滑動時不會觸發您的功能，但只有當該值在一段時間內沒有改變時纔會觸發。

var timeout; 
$scope.$watch('sliders.sliderValue', function() { 
    if (timeout) { 
     $timeout.cancel(timeout); 
    } 
    timeout = $timeout($scope.executeMe,200); 
});

見example

來源

2014-11-03 09:03:55 yarons

嗨，謝謝，但這個執行即使該值沒有改變。 – 2014-11-03 10:31:49

請參閱上面的更新 – yarons 2014-11-03 11:30:56

如果您在組件外部上移鼠標，即將鼠標移動到組件外部時，ng-mouseup將不會觸發 - 即拖動滑塊但將鼠標指針向下移動到頁面上，滑塊仍然處於活動狀態並拖動，然後釋放鼠標按鈕你不會得到一個mouseup解僱。 – caprica 2014-12-23 20:01:23

角引導滑塊 - 關於停止執行功能

回答

相關問題