angular如何嵌入JQ代码?

项目当中遇见控制的问题,之前用JQ写的面板拖拽效果想移植到angular代码里面不知道该怎么处理求大神知道
JQ代码
scale=function(btn,bar,title,from,to,initnum){
//获取增减温度的按钮
this.plus=$('.scale_btn_la');
this.add=$('.scale_btn_ra');
this.btn=document.getElementById(btn);
this.bar=document.getElementById(bar);
this.title=document.getElementById(title);
this.step=this.bar.getElementsByTagName("DIV")[0];
this.from=from;
this.to=to;
this.initnum=initnum;
this.init();
};
varlength=0;
scale.prototype={
init:function(){
varf=this,g=document,b=window,m=Math;
$('.scale_panel.fl').html(f.from+'℃');
$('.scale_panel.fr').html(f.to+'℃');
$('.basemsgspan').html(f.initnum+'℃');
if(f.from){
length=100/(f.to-f.from);
varlengthinit=f.to-f.initnum;
varoffsetleft=(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){
varx=event.targetTouches[0].pageX;
varl=this.offsetLeft;
varmax=f.bar.offsetWidth-this.offsetWidth;
g.addEventListener('touchmove',function(_event){
varthisX=_event.targetTouches[0].pageX;
varto=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){
varx=(e||b.event).clientX;
varl=this.offsetLeft;
varmax=f.bar.offsetWidth-this.offsetWidth;
g.touchmove=function(e){
varthisX=(e||b.event).clientX;
varto=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=newFunction('this.touchmove=null');
};*/
//手动控制
f.plus.on('click',function(){
varcurrentNum=parseInt(f.title.innerHTML);
if(currentNum>f.from){
varlengthinit=f.to-(currentNum-1);
varoffsetleft=(f.bar.clientWidth/(f.to-f.from))*(Math.abs(f.to-f.from)-Math.abs(lengthinit))+length;
f.title.innerHTML=currentNum-1;
$('.basemsgspan').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(){
varcurrentNum=parseInt(f.title.innerHTML);
if(currentNumvarlengthinit=f.to-(currentNum+1);
varoffsetleft=(f.bar.clientWidth/(f.to-f.from))*(Math.abs(f.to-f.from)-Math.abs(lengthinit))+length;
f.title.innerHTML=currentNum+1;
$('.basemsgspan').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){
varnum=parseInt(pos/length)+1;
varnum1=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;
$('.basemsgspan').html(num1+'℃');
}
}
//冰箱温度控制
//newscale('btn','bar','title',-23,-15,-13);
functionchangeTemper($this,$type){
$('.dialog').remove();
varnum=$this.find('pspan').html();
if($type==1){
//冷藏区
cangshiname='冷藏区';
$('.main').append(dialogModal('冷藏区'));
newscale('btn','bar','title',1,9,num);
}elseif($type==2){
//变温区
$('.main').append(dialogModal('变温区'));
newscale('btn','bar','title',-20,5,num);
}elseif($type==3){
//冷冻区
$('.main').append(dialogModal('冷冻区'));
newscale('btn','bar','title',-23,-15,num);
}
$('.dialog').find('.dialog-btn-ok').on('click',function(){
//跟控制面板交互根据$type参数联动数据
if($type==1){
$this.find('pspan').html($('.basemsgspan').html().replace('℃',''));
$('.leng').html($('.basemsgspan').html().replace('℃',''));
$('.dialog').remove();
}
elseif($type==2){
$this.find('pspan').html($('.basemsgspan').html().replace('℃',''));
$('.bian').html($('.basemsgspan').html().replace('℃',''));
$('.dialog').remove();
}
elseif($type==3){
$this.find('pspan').html($('.basemsgspan').html().replace('℃',''));
$('.dong').html($('.basemsgspan').html().replace('℃',''));
$('.dialog').remove();
}
});
}
functiondialogModal($name){
varhtmlstr=''+
'
'+
''+
''+
''+
''+$name+'-20℃'+
'实时温度'+
'
'+
''+
'
'+
''+
'-23℃'+
''+
'
'+
''+
'-23'+
'
'+
'
'+
'-15℃'+
''+
''+
''+
'

设置温度

'+
''+
''+
''+
'取消'+
'确定'+
''+
''+
'';
returnhtmlstr;
}
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
});
}
}
elseif(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
});
}
}
elseif(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
});
}
}
};

			
人到中年有点甜
浏览 467回答 2
2回答

LEATH

可以angular指令里写jQuery代码,如果已经引入了jQuery库,那么angular指令中link的第二个参数就是jQuery对象。

HUX布斯

angular.directive('foo',function(){return{link:function(scope,el){//TODO调用你jq的初始化代码el.something()...}}})
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript