0

我从 Angular.js 指令开始，在任何应用程序中，我都使用 jQuery UI 滑块。

我要做的是对这些滑块的滑动事件执行自定义回调，具体取决于滑块，因为我在页面中有多个。

我在这里做了一个 JSFiddle：http: //jsfiddle.net/zWHyM/

基本上，这是我“编写”的指令，灵感来自我发现的一些 Google 讨论线程。

HTML：

<section id='app'>
    <aside id='settings' ng-controller='SettingsCtrl'>
        <form name='settings-form' method='post' action='#' ng-submit='generate()'>
            <h4 class='settings-title'>Settings</h4>
            <h5>Quality <span id='quality-value' class='info'>1</span></h5>
            <div id='quality' class='slider slider-range' min='1' max='3' step='1' value='1' ui-slider></div>
            <h6 id='quality-label' class='label info'>Take care of this point: increase the quality level needs a lot of resources from your computer, it may slow it down or crash this website.</h6>
            <h5>rotation <span id='rotation-value' class='info'>0</span></h5>
            <div id='rotation' class='slider slider-range' min='0' max='360' step='1' value='0' ui-slider></div>
            <input type='submit' id='submit' name='submit' value='Hyperlapse it !' />
        </form>
    </aside>
</section>

JS：

angular.module('myApp.directive', []).directive('uiSlider', function () {
    return function(scope, element, attrs) {
        element.slider({
            value: parseInt(attrs.value),
            min: parseInt(attrs.min),
            max: parseInt(attrs.max),
            step: parseInt(attrs.step),
            slide: function (e, ui) {
                // So here I can get the value with ui.value,
                // But how to execute a custom callback, depending on the slider ?
                // For instance, I am trying to update an element with the value
                // $('#quality-value').text(ui.value) for the quality slider
                // $('#rotation-value').text(ui.value) for the rotation slider.
            }
        });
    }
});

我将不胜感激有关这一点的任何建议/建议！

4

1 回答 1

0

看看http://jsfiddle.net/cJRCW/

一个快速的解决方案是将回调的名称作为属性传递给指令，假设这将是本地范围内可用的函数。

在您的模板中：

<div id='quality' class='slider slider-range' min='1' max='30' step='1' value='1' callback='callback1' ui-slider></div>

在您的控制器中：

$scope.callback1 = function() {
    console.log('callback1 called');   
}

$scope.callback2 = function() {
    console.log('callback2 called');
}

在您的指令中：

slide: function (e, ui) {
    scope[attrs.callback]();
}
于 2013-04-28T23:44:40.320 回答