我正在尝试将 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 的值未设置为我的数据
最佳答案
我的解决方案，有效。
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];
});
如果有人想优化这部分...;)
关于javascript - NoUiSlider 已初始化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36932461/