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