jquery - Comment intégrer du code JQ dans Angular?

Question

J'ai rencontré un problème de contrôle dans le projet. J'ai déjà utilisé l'effet de glissement de panneau écrit en JQ. Je souhaite le transplanter en code angulaire et je ne sais pas comment le gérer. Veuillez me le faire savoir.

Code 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 = '<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;
    }

angulaire

//加温度
            $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
                        });
                    }
                }

            };
        

Answer 1

Vous pouvez écrire du code jQuery dans l'instruction angulaire. Si la bibliothèque jQuery a été introduite, alors le deuxième paramètre du lien dans l'instruction angulaire est l'objet jQuery.

Answer 2

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