I encountered a control problem in the project. I used the panel drag effect written in JQ before. I want to transplant it to angular code but I don’t know how to deal with it. Please let me know.
JQ code
scale = function (btn, bar, title, from, to, initnum) {
//获取增减温度的按钮
this.plus = $('.scale_btn_l a');
this.add = $('.scale_btn_r a');
this.btn = document.getElementById(btn);
this.bar = document.getElementById(bar);
this.title = document.getElementById(title);
this.step = this.bar.getElementsByTagName("p")[0];
this.from = from;
this.to = to;
this.initnum = initnum;
this.init();
};
var length = 0;
scale.prototype = {
init: function () {
var f = this, g = document, b = window, m = Math;
$('.scale_panel .fl').html(f.from + '℃');
$('.scale_panel .fr').html(f.to + '℃');
$('.basemsg span').html(f.initnum + '℃');
if (f.from) {
length = 100 / (f.to - f.from);
var lengthinit = f.to - f.initnum;
var offsetleft = (f.bar.clientWidth / (f.to - f.from)) * (Math.abs(f.to - f.from) - Math.abs(lengthinit)) + length;
this.title.innerHTML = this.initnum;
f.btn.style.left = offsetleft + 'px';
this.step.style.width = offsetleft + 'px';
}
f.btn.addEventListener('touchstart', function(event) {
var x = event.targetTouches[0].pageX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.addEventListener('touchmove',function(_event){
var thisX = _event.targetTouches[0].pageX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
if (to > length) {
to += length;
}
if(to > f.bar.offsetWidth){
f.btn.style.left = f.bar.offsetWidth + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), f.bar.offsetWidth);
}else{
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
}
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
});
}, false);
/*f.btn.touchstart = function (e) {
var x = (e || b.event).clientX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.touchmove = function (e) {
var thisX = (e || b.event).clientX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
if (to > length) {
to += length;
}
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
g.touchend = new Function('this.touchmove=null');
};*/
//手动控制
f.plus.on('click', function () {
var currentNum = parseInt(f.title.innerHTML);
if (currentNum > f.from) {
var lengthinit = f.to - (currentNum - 1);
var offsetleft = (f.bar.clientWidth / (f.to - f.from)) * (Math.abs(f.to - f.from) - Math.abs(lengthinit)) + length;
f.title.innerHTML = currentNum - 1;
$('.basemsg span').html((currentNum - 1) + '℃');
// $('.leng').html((currentNum - 1) + '℃');
if ((currentNum - 1) == f.from) {
f.btn.style.left = 0 + 'px';
f.step.style.width = 0 + 'px';
} else {
f.btn.style.left = offsetleft + 'px';
f.step.style.width = offsetleft + 'px';
}
}
});
f.add.on('click', function () {
var currentNum = parseInt(f.title.innerHTML);
if (currentNum < f.to) {
var lengthinit = f.to - (currentNum + 1);
var offsetleft = (f.bar.clientWidth / (f.to - f.from)) * (Math.abs(f.to - f.from) - Math.abs(lengthinit)) + length;
f.title.innerHTML = currentNum + 1;
$('.basemsg span').html((currentNum + 1) + '℃');
// $('.leng').html((currentNum + 1) + '℃');
if ((currentNum + 1) == f.to) {
f.btn.style.left = f.bar.clientWidth + 'px';
f.step.style.width = f.bar.clientWidth + 'px';
} else {
f.btn.style.left = offsetleft + 'px';
f.step.style.width = offsetleft + 'px';
}
}
});
},
ondrag: function (pos, x) {
var num = parseInt(pos / length) + 1;
var num1 = 0;
if (this.from < 0) {
num1 = this.from + (num - 1);
} else {
num1 = num;
}
this.step.style.width = Math.max(0, x) + 'px';
this.title.innerHTML = num1;
$('.basemsg span').html(num1 + '℃');
}
}
//冰箱温度控制
//new scale('btn', 'bar', 'title', -23, -15, -13);
function changeTemper($this, $type) {
$('.dialog').remove();
var num = $this.find('p span').html();
if ($type == 1) {
//冷藏区
cangshiname = '冷藏区';
$('.main').append(dialogModal('冷藏区'));
new scale('btn', 'bar', 'title', 1, 9, num);
} else if ($type == 2) {
//变温区
$('.main').append(dialogModal('变温区'));
new scale('btn', 'bar', 'title', -20, 5, num);
} else if ($type == 3) {
//冷冻区
$('.main').append(dialogModal('冷冻区'));
new scale('btn', 'bar', 'title', -23, -15, num);
}
$('.dialog').find('.dialog-btn-ok').on('click', function () {
//跟控制面板交互根据$type参数联动数据
if ($type == 1){
$this.find('p span').html($('.basemsg span').html().replace('℃', ''));
$('.leng').html($('.basemsg span').html().replace('℃', ''));
$('.dialog').remove();
}
else if ($type == 2){
$this.find('p span').html($('.basemsg span').html().replace('℃', ''));
$('.bian').html($('.basemsg span').html().replace('℃', ''));
$('.dialog').remove();
}
else if ($type == 3){
$this.find('p span').html($('.basemsg span').html().replace('℃', ''));
$('.dong').html($('.basemsg span').html().replace('℃', ''));
$('.dialog').remove();
}
});
}
function dialogModal($name){
var htmlstr = '<p class="dialog">' +
' <p class="mask"></p>' +
' <p class="dialog-modal">' +
' <p class="dialog-bd">' +
' <p class="vfridge-slide">' +
' <p class="basemsg">' + $name + '<span>-20℃</span>' +
' <small>实时温度</small>' +
' </p>' +
' <p class="scale_wrap">' +
' <p class="scale_btn_l fl"><a><img src="images/refrigeratorControl/icon-plusDevice@3x.png"></a></p>' +
' <p class="scale_panel fl">' +
' <span class="fl">-23℃</span>' +
' <p class="scale" id="bar">' +
' <p id="scaleprogress" name="scaleprogress" class="scaleprogress"></p>' +
' <p id="btn" class="btn">' +
' <span id="title" class="msg">-23</span>' +
' </p>' +
' </p>' +
' <span class="fr">-15℃</span>' +
' </p>' +
' <p class="scale_btn_r fr"><a><img src="images/refrigeratorControl/icon-addDevice@3x.png"></a></p>' +
' </p>' +
' <p>设置温度</p>' +
' </p>' +
' </p>' +
' <p class="dialog-ft">' +
' <a class="dialog-btn-cancel" onclick="$(\'.dialog\').remove();changge = null;">取消</a>' +
' <a class="dialog-btn-ok">确定</a>' +
' </p>' +
' </p>' +
'</p>';
return htmlstr;
}angular
//加温度
$scope.plusTemp = function(type){
if (type == 1) {
if ($scope.refrigeratorTargetTemperature >= $scope.DeviceData.refrigeratorTargetTemperature.logic.range.maxValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_maxTem','lang_cannotHigh']).then(function(translations) {
$$.warn(translations.lang_maxTem + " " + $scope.DeviceData.refrigeratorTargetTemperature.logic.range.maxValue + translations.lang_cannotHigh);
});
}
} else {
$scope.refrigeratorTargetTemperature === "-/-" ? 0 : $scope.refrigeratorTargetTemperature;
$scope.refrigeratorTargetTemperature += $scope.DeviceData.refrigeratorTargetTemperature.logic.range.step;
$scope.settingTemp({
'refrigeratorTargetTemperature': $scope.refrigeratorTargetTemperature
});
}
}
else if (type == 3) {
if ($scope.vtRoomTargetTemperature +21 >= $scope.DeviceData.vtRoomTargetTemperature.logic.range.maxValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_maxTem','lang_cannotHigh']).then(function(translations) {
$$.warn(translations.lang_maxTem + " " + ($scope.DeviceData.vtRoomTargetTemperature.logic.range.maxValue -21)+ translations.lang_cannotHigh);
});
}
} else {
$scope.vtRoomTargetTemperature === "-/-" ? 0 : $scope.vtRoomTargetTemperature;
$scope.vtRoomTargetTemperature += $scope.DeviceData.vtRoomTargetTemperature.logic.range.step;
$scope.settingTemp({
'vtRoomTargetTemperature': $scope.vtRoomTargetTemperature
});
}
}
else {
if (($scope.freezerTargetTemperature+26) >= $scope.DeviceData.freezerTargetTemperature.logic.range.maxValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_maxTem','lang_cannotHigh']).then(function(translations) {
$$.warn("不能再高了"+ " " + ($scope.DeviceData.freezerTargetTemperature.logic.range.maxValue -26) + translations.lang_cannotHigh);
});
}
} else {
$scope.freezerTargetTemperature === "-/-" ? 0 : $scope.freezerTargetTemperature;
$scope.freezerTargetTemperature += $scope.DeviceData.freezerTargetTemperature.logic.range.step;
$scope.settingTemp({
'freezerTargetTemperature': $scope.freezerTargetTemperature
});
}
}
};
//减温度
$scope.minusTemp = function(type){
if (type == 1) {
if ($scope.refrigeratorTargetTemperature <= $scope.DeviceData.refrigeratorTargetTemperature.logic.range.minValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_minTem','lang_cannotLow']).then(function(translations) {
$$.warn(translations.lang_minTem + " " + $scope.DeviceData.refrigeratorTargetTemperature.logic.range.minValue + translations.lang_cannotLow);
});
}
} else {
$scope.refrigeratorTargetTemperature === "-/-" ? 0 : $scope.refrigeratorTargetTemperature;
$scope.refrigeratorTargetTemperature -= $scope.DeviceData.refrigeratorTargetTemperature.logic.range.step;
$scope.settingTemp({
'refrigeratorTargetTemperature': $scope.refrigeratorTargetTemperature
});
}
}
else if (type == 3){
if (($scope.vtRoomTargetTemperature +21 ) <= $scope.DeviceData.vtRoomTargetTemperature.logic.range.minValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_minTem','lang_cannotLow']).then(function(translations) {
$$.warn(translations.lang_minTem + " " + ($scope.DeviceData.vtRoomTargetTemperature.logic.range.minValue -21) + translations.lang_cannotLow);
});
}
} else {
$scope.vtRoomTargetTemperature === "-/-" ? 0 : $scope.vtRoomTargetTemperature;
$scope.vtRoomTargetTemperature -= $scope.DeviceData.vtRoomTargetTemperature.logic.range.step;
$scope.settingTemp({
'vtRoomTargetTemperature': $scope.vtRoomTargetTemperature
});
}
} else {
if (($scope.freezerTargetTemperature+26) <= $scope.DeviceData.freezerTargetTemperature.logic.range.minValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_minTem','lang_cannotLow']).then(function(translations) {
$$.warn(translations.lang_minTem + " " + ($scope.DeviceData.freezerTargetTemperature.logic.range.minValue -26) + translations.lang_cannotLow);
});
}
} else {
$scope.freezerTargetTemperature === "-/-" ? 0 : $scope.freezerTargetTemperature;
$scope.freezerTargetTemperature -= $scope.DeviceData.freezerTargetTemperature.logic.range.step;
$scope.settingTemp({
'freezerTargetTemperature': $scope.freezerTargetTemperature
});
}
}
};
PHP中文网2017-06-30 10:02:14
You can write jQuery code in the angular instruction. If the jQuery library has been introduced, then the second parameter of the link in the angular instruction is the jQuery object.
怪我咯2017-06-30 10:02:14
angular.directive('foo', function(){
return {
link: function(scope, el){
// TODO 调用你jq的初始化代码 el.something()...
}
}
})