javascript - NoUiSlider 已初始化

Question

我正在尝试将 noUiSlider 与 Angular JS 一起使用，我有一个包含 4 个 slider 的指令，我想在 2 个页面上显示该指令。当我更改页面时，出现错误:错误: slider 已初始化。

如果我刷新页面，就不会出现此错误，但这不是我想要的:)

我看到一个“解决方案”，其中包括直接修改 noUiSlider.js 的代码，但我不想这样做

                var familyLevel = document.getElementById('family-level');
                var moneyLevel = document.getElementById('money-level');
                var securityLevel = document.getElementById('security-level');
                var hobbiesLevel = document.getElementById('hobbies-level');
                        service.initSliders(scope);
                        if(Number.isInteger(scope.owner))
                        {
                            priorities.getPriorities(scope.owner).then(function(data){
                                console.log(data);
                                if(angular.isObject(data)){
                                    angular.forEach(scope.model.priorities, function(value, key){
                                        if(data[key]) scope.model.priorities[key] = data[key];
                                    });
                                    service.initSliderValues(scope);
                                }
                            }).catch(function(error){
                                console.error(error);
                            });
                        }
                        else{
                            appAuth.currentUser().then(function(user) {
                                priorities.getPriorities(user.id).then(function(data){
                                    if(angular.isObject(data)){
                                        angular.forEach(scope.model.priorities, function(value, key){
                                            if(data[key]) scope.model.priorities[key] = data[key];
                                        });
                                        service.initSliderValues(scope);
                                    }
                                });
                            });
                        }

                    },
                    initSliderValues: function(scope){

                        familyLevel.noUiSlider.set(scope.model.priorities.family);
                        familyLevel.noUiSlider.on('set', function (val, hand) {
                            familyLevel.setAttribute("data-level", val[hand]);
                            scope.model.priorities.family = val[hand];
                        });

                        moneyLevel.noUiSlider.set(scope.model.priorities.money);
                        moneyLevel.noUiSlider.on('set', function (val, hand) {
                            moneyLevel.setAttribute("data-level", val[hand]);
                            scope.model.priorities.money = val[hand];
                        });

                        securityLevel.noUiSlider.set(scope.model.priorities.security);
                        securityLevel.noUiSlider.on('set', function (val, hand) {
                            securityLevel.setAttribute("data-level", val[hand]);
                            scope.model.priorities.security = val[hand];
                        });

                        hobbiesLevel.noUiSlider.set(scope.model.priorities.hobbies);
                        hobbiesLevel.noUiSlider.on('set', function (val, hand) {
                            hobbiesLevel.setAttribute("data-level", val[hand]);
                            scope.model.priorities.hobbies = val[hand];
                        });

                    },
                    initSliders: function (scope) {

                            var sliders = $('.slider-range');

                            for (var i = 0; i < sliders.length; i++) {
                                try{
                                    noUiSlider.create(sliders[i], {
                                        start: 2,
                                        step: 1,
                                        connect: 'lower',
                                        range: {
                                            'min': 0,
                                            'max': 5
                                        },
                                        format: {
                                            to: function (value) {
                                                return value;
                                            },
                                            from: function (value) {
                                                return value;
                                            }
                                        }
                                    }, true);
                                }catch(err){
                                    sliders[i].noUiSlider.destroy();
                                    service.initSliders(scope);
                                }

                            }
                           // initSlider=true;

                    }

我修改了代码以在 catch 中添加销毁，我没有错误，但 slider 的值未设置为我的数据

Answer 1

我的解决方案，有效。

sliders[0].noUiSlider.set(scope.model.priorities.family);
                        sliders[0].noUiSlider.on('set', function (val, hand) {
                            sliders[0].setAttribute("data-level", val[hand]);
                            scope.model.priorities.family = val[hand];
                        });

                        sliders[1].noUiSlider.set(scope.model.priorities.money);
                        sliders[1].noUiSlider.on('set', function (val, hand) {
                            sliders[1].setAttribute("data-level", val[hand]);
                            scope.model.priorities.money = val[hand];
                        });

                        sliders[2].noUiSlider.set(scope.model.priorities.security);
                        sliders[2].noUiSlider.on('set', function (val, hand) {
                            sliders[2].setAttribute("data-level", val[hand]);
                            scope.model.priorities.security = val[hand];
                        });

                        sliders[3].noUiSlider.set(scope.model.priorities.hobbies);
                        sliders[3].noUiSlider.on('set', function (val, hand) {
                            sliders[3].setAttribute("data-level", val[hand]);
                            scope.model.priorities.hobbies = val[hand];
                        });

如果有人想优化这部分...;)