Question

您好我正在寻找像这样的Angular.js示例， http://www.jqueryscript.net/form/Knob-Style-Rotary-Switch-Plugin-with-jQuery-rotarySwitch.html

理想情况下，从旋转开关到基于开关位置向服务端发布一些命令的完整路径。

有什么好的例子吗？

否则我计划使用此示例jquery文件编写一个角度模块，每次旋转开关移动到一个新位置时，都会调用$ http.post让服务端知道。主模块将使用此旋转开关模块。但真的不想写我自己的。

Answer 1

如评论中提到的那样，我也认为旋转开关插件可能没有指令。

因此，下面的演示中的内容应该适用于此。我刚刚创建了一个指令，我已经在链接方法中初始化了jquery插件（dom已准备好在postLink中操作）。

为了减少http流量，我添加了一个超时，以便以较低的速率调用回调。（请参阅<div data-link="id{:'answers_ + fieldName" class='collapse'>中的rotKnob_delayedCallback）

您可以为每个jQuery插件编写一个指令，在那里找不到包装器指令。

请同时查看浏览器控制台。在jsfiddle中，您可以在控制台中看到该位置的后期回显。

以下是演示文稿的fiddle。

DEFAULT_OPTS

angular.module('demoApp', ['rotaryKnobModule'])
	.factory('knobService', KnobService)
    .controller('mainController', MainController)
    
angular.module('rotaryKnobModule', [])
	.constant('DEFAULT_OPTS', {
    	// 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 = {
    	minimum: 0,
        maximum: 100
    };
    vm.onChange = function(pos) {
    	console.log('current position change handler', pos);
        
        knobService.postPos(pos).then(function(response){
        	console.log('success', response)
        }, function(response) {
        	console.log('failed');
        }); 
    }
}

function KnobService($http) {
	return {
    	postPos: function(pos) {
            var data = $.param({
                json: JSON.stringify({
                    position: pos
                })
            });
        	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) {
        	var options = scope.rotKnobCtrl.options,
            	ctrl = scope.rotKnobCtrl,
                pos = 0, changeTimeout;
                
            //console.log(options);
            var $rotKnob = $(element).rotaryswitch(options);
			$rotKnob.on('change', function() {
            	pos = parseInt($(this).val());
            	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) {
			var self = this;
            self.pos = 0;
            //console.log(self.options);
            self.options = angular.extend({}, DEFAULT_OPTS, self.options);
        }
    }
}

旋钮式旋转开关的任何角度示例？

1 个答案: