ノブ式ロータリースイッチの角度の例は？

Question

こんにちは、私は理想的 http://www.jqueryscript.net/form/Knob-Style-Rotary-Switch-Plugin-with-jQuery-rotarySwitch.html

スイッチの位置に基づいて、サービス側にいくつかのコマンドを、投稿へのロータリースイッチからの完全なパス、このようなAngular.js例を探しています。

いい例がありますか？

それ以外の場合は、このサンプルjqueryファイルを使用して角度モジュールを作成する予定です。ロータリースイッチが新しい場所に移動するたびに、サービス側に$ http.postが呼び出されます。メインモジュールはこのロータリースイッチモジュールを使用します。しかし、本当に自分のことを書いてはいけません。

Answer 1

私はまた、そのロータリースイッチプラグインにはおそらく指示がないと思います。

このため、以下のデモのようなものがうまくいくはずです。私はリンクメソッド内でjqueryプラグインを初期化したディレクティブを作成しました（domはpostLink内で操作する準備ができています）。

httpトラフィックを減らすために、タイムアウトを追加して、コールバックがより低いレートで呼び出されるようにしました。 （rotKnob_delayedCallbackのDEFAULT_OPTSを参照してください）

ラッパー・ディレクティブを見つけることができないすべてのjQueryプラグインのディレクティブを書くことができます。

ブラウザのコンソールもご覧ください。 jsfiddleでは、コンソールの位置のポストエコーを見ることができます。

また、下記のデモへのfiddleもあります。

angular.module('demoApp', ['rotaryKnobModule']) 
 
\t .factory('knobService', KnobService) 
 
    .controller('mainController', MainController) 
 
    
 
angular.module('rotaryKnobModule', []) 
 
\t .constant('DEFAULT_OPTS', { 
 
    \t // Minimal value 
 
       minimum: 0, 
 

 
       // Maximum value 
 
       maximum: 12, 
 

 
       // Step size 
 
       step: 1, 
 

 
       // Snap to steps in motion 
 
       snapInMotion: true, 
 

 
       // Start point in deg 
 
       beginDeg: 0, 
 

 
       // Length in deg 
 
       lengthDeg: 360, 
 

 
       // // Which value will used, if the the start and the end point at the same deg. 
 
       minimumOverMaximum: true, 
 

 
       // Show input element 
 
       showInput: false, 
 

 
       // Show deg marks 
 
       showMarks: false, 
 

 
       // Theme class 
 
       themeClass: 'defaultTheme', 
 
       
 
       // custom option for directive 
 
       rotKnb_delayedCallback: 500 // in ms 
 
    }) 
 
    .directive('rotaryKnob', RotaryKnob); 
 

 
function MainController(knobService, $timeout) { 
 
    var vm = this; 
 
    vm.position = 0; 
 
    vm.options = { 
 
    \t minimum: 0, 
 
     maximum: 100 
 
    }; 
 
    vm.onChange = function(pos) { 
 
    \t console.log('current position change handler', pos); 
 
     
 
     knobService.postPos(pos).then(function(response){ 
 
     \t console.log('success', response) 
 
     }, function(response) { 
 
     \t console.log('failed'); 
 
     }); 
 
    } 
 
} 
 

 
function KnobService($http) { 
 
\t return { 
 
    \t postPos: function(pos) { 
 
      var data = $.param({ 
 
       json: JSON.stringify({ 
 
        position: pos 
 
       }) 
 
      }); 
 
     \t return $http.post('/echo/json/', data); 
 
     } 
 
    } 
 
} 
 

 
function RotaryKnob($timeout) { 
 
    return { 
 
     scope: {}, 
 
     bindToController: { 
 
      pos: '=', 
 
      options: '=?', 
 
      onChange: '&?' 
 
     }, 
 
     controllerAs: 'rotKnobCtrl', 
 
     template: '<input type="text" class="rotarySwitch"/>', 
 
     link: function(scope, element, attrs) { 
 
     \t var options = scope.rotKnobCtrl.options, 
 
      \t ctrl = scope.rotKnobCtrl, 
 
       pos = 0, changeTimeout; 
 
       
 
      //console.log(options); 
 
      var $rotKnob = $(element).rotaryswitch(options); 
 
\t \t \t $rotKnob.on('change', function() { 
 
      \t pos = parseInt($(this).val()); 
 
      \t scope.rotKnobCtrl.pos = pos; 
 
       
 
       if (!changeTimeout) // reduce update rate to server 
 
        changeTimeout = $timeout(function() { 
 
         ctrl.onChange({pos: pos}); 
 
         changeTimeout = null; 
 
        }, options.rotKnb_delayedCallback); 
 
        
 
       scope.$apply(); 
 
      }) 
 
     }, 
 
     controller: function(DEFAULT_OPTS) { 
 
\t \t \t var self = this; 
 
      self.pos = 0; 
 
      //console.log(self.options); 
 
      self.options = angular.extend({}, DEFAULT_OPTS, self.options); 
 
     } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.rawgit.com/r12r/com.redwhitesilver.rotarySwitch/master/jquery.rotaryswitch.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular.js"></script> 
 
<script src="https://cdn.rawgit.com/r12r/com.redwhitesilver.rotarySwitch/master/jquery.rotaryswitch.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController as mainCtrl"> 
 
    <rotary-knob 
 
     pos="mainCtrl.position" 
 
     options="mainCtrl.options" 
 
     on-change="mainCtrl.onChange(pos)" 
 
     ></rotary-knob> 
 
    Current position {{mainCtrl.position}} 
 
</div>