jquery - angular如何嵌入JQ代码？

【字号：大中小】日期：2022-12-18浏览：21作者：雯心

问题描述

项目当中遇见控制的问题，之前用JQ写的面板拖拽效果想移植到angular代码里面不知道该怎么处理求大神知道

JQ代码

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 = ’’ + ’’ + ’’ + ’ ’ + ’’ + ’ ’ + $name + ’-20℃’ + ’实时温度’ + ’ ’ + ’ ’ + ’<a><img src='https://www.6hehe.com/wenda/images/refrigeratorControl/icon-plusDevice@3x.png'></a>’ + ’’ + ’ -23℃’ + ’ ’ + ’’ + ’’ + ’ -23’ + ’’ + ’ ’ + ’ -15℃’ + ’’ + ’<a><img src='https://www.6hehe.com/wenda/images/refrigeratorControl/icon-addDevice@3x.png'></a>’ + ’ ’ + ’ 设置温度’ + ’’ + ’ ’ + ’ ’ + ’<a onclick='$(’.dialog’).remove();changge = null;'>取消</a>’ + ’<a class='dialog-btn-ok'>确定</a>’ + ’ ’ + ’’ + ’’;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}); }} };

问题解答

回答1：

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

回答2：

angular.directive(’foo’, function(){ return {link: function(scope, el){ // TODO 调用你jq的初始化代码 el.something()...} }})

上一条：angular.js - 关于angularjs 自定义组件(tabset)下一条：angular.js - Angular模板中链接前面不带#，如何能路由到模板？

相关文章：
1. javascript - 关于input="file"，重复选择同一文件时不触发change事件的问题2. Js对table 如何实现多选？3. 为什么有的时候用function(){}，有的时候不用4. <tr valign="top"> 看不懂5. solaris基础和常用知识 (2)6. ajax的url怎么写？7. node.js是用来干什么的8. mysql 使用 join 还是 "," 进行多表查询？？？9. mysql - 使用hibernate连接数据库时,数据库版本过高不支持关键字"type" ；10. 发现 <li><a href="/index.php">回到前台</a></li>这样回到首页后，不是登录状态