Irgendein eckiges Beispiel für Knopf-Drehschalter?

Question

Hallo ich suche nach einem Angularjs Beispiel so, http://www.jqueryscript.net/form/Knob-Style-Rotary-Switch-Plugin-with-jQuery-rotarySwitch.html

einen vollständigen Pfad von Drehschalter auf einige Befehle auf der Service-Seite veröffentlichen, idealerweise in der Schalterstellung basiert.

Ein gutes Beispiel bitte?

Sonst plane ich, ein Winkelmodul mit dieser Beispiel-Jquery-Datei zu schreiben, jedes Mal, wenn der Drehschalter an einen neuen Ort fährt, ist es $ http.post, um die Service-Seite wissen zu lassen. Das Hauptmodul wird dieses Drehschaltermodul verwenden. Aber ich möchte wirklich nicht mein eigenes schreiben.

Answer 1

Wie in den Kommentaren erwähnt, denke ich auch, dass es wahrscheinlich keine Richtlinie für dieses Drehschalter-Plugin gibt.

So etwas wie in der Demo unten sollte dafür funktionieren. Ich habe gerade eine Direktive erstellt, in der ich das jquery-Plugin innerhalb der Link-Methode initialisiert habe (dom ist bereit, innerhalb von postLink zu manipulieren).

Um HTTP-Verkehr zu reduzieren, habe ich ein Timeout hinzugefügt, so dass der Rückruf mit einer niedrigeren Rate aufgerufen wird. (siehe rotKnob_delayedCallback in DEFAULT_OPTS)

Sie könnten eine Direktive für jedes jQuery Plugin schreiben, wo Sie keine Wrapper Direktive finden können.

Bitte schauen Sie sich auch die Browser Konsole an. In jfiddle können Sie das Post-Echo der Position in der Konsole sehen.

Hier ist auch die fiddle zur Demo unten.

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>