如何将工具提示添加到角度1 ui滑块

本文介绍了如何将工具提示添加到角度1 ui滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在创建一个角度ui滑块指令。但是无法为滑块控件添加工具提示。请建议 我尝试过： angular.module（'lt.directives'）。directive（'slider'，['$ templateCache'，'$ parseOptions'，function（$ templateCache，$ parseOptions）{ //将这些默认值移动到value object var UPDATE_DELAY_MS = 100， NUM_TICKS = 20， MIN = 0， MAX = 5000， VALUE = 1500， STEPS = 100 ， DEFAULT_HTML ='< div class =ui-slider-bwrap>'+ '< div class =ui-slider-ticks>'+ ' < span class =ui-tick-markng-style ={left：（5 * $ index）+ \'％\'}ng-repeat =tick in ticks/>'+ '< / div>'+ '< div class =ui-slider>< / div>'+ '< div class =ui-slider - 标签>'+ '< span class =minLabel> {{labelMin}}< / span>'+ '< span class =maxLabel> {{labelMax +（value ==最大&& showLabelMaxPlus&& +|| ）}}< / span>'+ '< / div>'+ '< / div>'; 返回{ require：'ngModel'，范围：{ value：'= ngModel'， defaultValue：'=？'， sliderData：'=？'， min：'=？'， max：'=？'， step：'=？'， labelMin：' @'， labelMax：'@'}，模板：function（element，attrs）{ //将来，根据attrs.slider $改变模板b $ b返回DEFAULT_HTML; }， link：function（scope，element，attrs，ngModel）{ //如果不存在则设置默认值 _.defaults（范围，{值：scope.defaultValue， labelMin：'0％'， labelMax：'100％'}）; //如果min / max未定义，则不设置隔离范围， //因为它将导致不可赋值的表达式错误。 if（_.every（[scope.min，scope.max]，angular.isDefined））{ _.defaults（范围，{ min：MIN， max ：MAX }）; } //只检查属性是否存在 scope.showLabelMaxPlus = angular.isDefined（attrs.showLabelMaxPlus）; var staggerStepObj = scope。$ eval（attrs.staggerStep）， modelMapObj = scope。$ eval（attrs.modelMap）， parsedOptions = angular.isDefined（attrs.sliderOptions） ）？ $ parseOptions（attrs.sliderOptions）：undefined， slider = element.find（'。ui-slider'）， sliderObj， optionsList = []， valuesArr = [ ]。 // Stagger-step和ng-options滑块都是映射值滑块 var buildMappedValueSlider = function（）{ //由于滑块使用不同的值系统，因此查找ngModel映射到的索引 //。 //确保index小于valuesArr length .. var newVal = parseFloat（scope.value，10）; var initialIndex = Math.min（_。sortedIndex（valuesArr，scope.value），valuesArr.length - 1）; // ..并且大于0 initialIndex = Math.max（initialIndex，0）; //规范化值 scope.value = valuesArr [initialIndex]; if（newVal< valuesArr [initialIndex]&&（valuesArr [initialIndex]％2）！== 0&& initialIndex> 0）{ scope.value = valuesArr [initialIndex -1]; } //如果没有attrs，则设置范围内的实际最小值和最大值 if（angular.isUndefined（scope.min））{ scope.min = valuesArr [0]; } if（angular.isUndefined（scope.max））{ scope.max = valuesArr [valuesArr.length - 1]; } //将标签附加到父作用域（坏！） if（angular.isDefined（parsedOptions））{作用域。$ parent.sliderLabel = _ .findWhere（optionsList，{value：scope.value}）。label; } sliderObj = {范围：'min'， min：0， max：valuesArr.length - 1， value：initialIndex }; slider.slider（sliderObj）; }; //观察模型，分钟和最大值 - 如果有任何变化，请更新滑块 if（angular.isDefined（parsedOptions））{ / /值可能是异步的，所以请等到 //初始化滑块之前返回。 //使用范围。$ parent，以便我们可以访问 //隔离范围之外的数据。 //假设：作为数组中obj标签的值 - 正在使用类似语法 parsedOptions.valuesFn（scope。$ parent，ngModel）.then（function（values）{ optionsList = values; valuesArr = _.pluck（values，'value'）; buildMappedValueSlider（）; }）; } else if（angular.isObject（staggerStepObj））{ var staggerStepKeys = _.map（_。keys（staggerStepObj）），function（key）{ return parseFloat（ key，10）; }）; //创建完整的值数组 for（var i = 0，ii = staggerStepKeys.length; i< ii; i ++）{ var rangeMin = staggerStepKeys [ i]， rangeMax =（i< staggerStepKeys.length - 1）？ staggerStepKeys [i + 1]：scope.max， rangeStep = staggerStepObj [staggerStepKeys [i]]， range = _.map（_。range（rangeMin，rangeMax，rangeStep），function（step） { // _.range不能正确创建浮动范围，所以修复此返回parseFloat（accounting.toFixed（步骤3））; }）; valuesArr = valuesArr.concat（range）; } //削减列表，使其介于最小值和最小值之间max valuesArr = _.filter（valuesArr，function（value）{ return value> = scope.min&& value< scope.max; }）; //添加好度量的最大值 valuesArr.push（scope.max）; buildMappedValueSlider（）; } else { sliderObj = {范围：'min'， min：scope.min， max：scope.max，值：angular.isObject（modelMapObj）？ _.invert（modelMapObj）[scope.value]：scope.value， step：scope.step || （scope.max - scope.min）/ STEPS }; slider.slider（sliderObj）; } var throttledModelUpdate = _.throttle（function（sliderValue）{ var modelValue = sliderValue; //找到真实的模型值 if（angular.isObject（staggerStepObj）|| angular.isDefined（parsedOptions））{ modelValue = valuesArr [sliderValue]; } //如果我们'我定义了一个模型映射，在设置模型值之前执行转换 // modelValue = angular.isObject（modelMapObj）？modelMapObj [modelValue]：modelValue; //将标签附加到父作用域（坏！） if（angular.isDefined（parsedOptions））{作用域。$ parent.sliderLabel = _.findWhere（optionsList，{value：modelValue}）。label; } 范围。$ apply（function（）{ //推滑块值（或映射值）输出到模型 ngModel。$ setViewValue（modelValue）; }）; }，UPDATE_DELAY_MS）; slider.bind（{ slide：function（event，ui）{ throttledModelUpdate（ui.value）; } }）; //初始化滑块 // TODO：观察这些值并根据外部更改 //重新初始化滑块，以便滑块可以动态更新 if（attrs.reset ===on）{ scope。$ watch（function（）{ return ngModel。$ modelValue; }，function（newVal，oldVal） { if（newVal！== oldVal）{ buildMappedValueSlider（）; } }）; } scope.ticks = _.range（NUM_TICKS）; } }; }]）; angular.module（' foss（'）。run（['$ templateCache'，'variation'，function（$ templateCache，variation）{ if（variation.getVariationByName（'style'）==='tactile'）{ $ templateCache.put（'ig-desired-loan-amount-slider'，'< label for =desired-loan-amount-sliderclass =control-labelng-bind-html = groupUtil.getProp（\'标签\'，\'你想借多少？\'）>< / label>'+ '< div class =row >'+ '< div class =col-xs-10 col-xs-offset-1>'+ '< div slider label-tip reset = {{resetSlider} } ng-model =inputs.desiredLoanAmountlabel-min =$ 0label-max =$ 400Kshow-label-max-plus slider-options =item.value as item.name for lists.desiredLoanAmount中的item />'+ '< span ng-show =formData.returnToHEclass =range-update&g t;范围已更新< / span>'+ '< / div>'+ '< / div>'）; } }]）; 解决方案 parseOptions'，function（ I am creating an angular ui slider directive. But unable to add tooltip for slider control. Please suggestWhat I have tried:angular.module('lt.directives').directive('slider', ['$templateCache', '$parseOptions', function ($templateCache, $parseOptions) { // Move these defaults into a value object var UPDATE_DELAY_MS = 100, NUM_TICKS = 20, MIN = 0, MAX = 5000, VALUE = 1500, STEPS = 100, DEFAULT_HTML = '<div class="ui-slider-bwrap">' + '<div class="ui-slider-ticks">' + ' <span class="ui-tick-mark" ng-style="{left: (5 * $index) + \'%\'}" ng-repeat="tick in ticks" />' + '</div>' + '<div class="ui-slider"></div>' + '<div class="ui-slider-labels">' + ' <span class="minLabel">{{labelMin}}</span>' + ' <span class="maxLabel">{{labelMax + (value == max && showLabelMaxPlus && "+" || "")}}</span>' + '</div>' + '</div>'; return { require: 'ngModel', scope: { value: '=ngModel', defaultValue: '=?', sliderData: '=?', min: '=?', max: '=?', step: '=?', labelMin: '@', labelMax: '@' }, template: function (element, attrs) { // In the future, vary the template based on attrs.slider return DEFAULT_HTML; }, link: function (scope, element, attrs, ngModel) { // Set defaults if none exist _.defaults(scope, { value: scope.defaultValue, labelMin: '0%', labelMax: '100%' }); // Don't set isolate scope if min/max are undefined, // since it'll result in a non-assignable expression error. if (_.every([scope.min, scope.max], angular.isDefined)) { _.defaults(scope, { min: MIN, max: MAX }); } // Only check for existance of the attribute scope.showLabelMaxPlus = angular.isDefined(attrs.showLabelMaxPlus); var staggerStepObj = scope.$eval(attrs.staggerStep), modelMapObj = scope.$eval(attrs.modelMap), parsedOptions = angular.isDefined(attrs.sliderOptions) ? $parseOptions(attrs.sliderOptions) : undefined, slider = element.find('.ui-slider'), sliderObj, optionsList = [], valuesArr = []; // Stagger-step and ng-options sliders are both mapped value sliders var buildMappedValueSlider = function () { // Since the slider uses a different value system, find the index // that the ngModel maps to. // Ensure index is less than valuesArr length.. var newVal = parseFloat(scope.value, 10); var initialIndex = Math.min(_.sortedIndex(valuesArr, scope.value), valuesArr.length - 1); // .. and greater than 0 initialIndex = Math.max(initialIndex, 0); // Normalize the value scope.value = valuesArr[initialIndex]; if (newVal < valuesArr[initialIndex] && (valuesArr[initialIndex] % 2) !== 0 && initialIndex > 0) { scope.value = valuesArr[initialIndex-1]; } // Set real min and max on scope if no attrs exist if (angular.isUndefined(scope.min)) { scope.min = valuesArr[0]; } if (angular.isUndefined(scope.max)) { scope.max = valuesArr[valuesArr.length - 1]; } // Attach label to parent scope (bad!) if (angular.isDefined(parsedOptions)) { scope.$parent.sliderLabel = _.findWhere(optionsList, { value: scope.value }).label; } sliderObj = { range: 'min', min: 0, max: valuesArr.length - 1, value: initialIndex }; slider.slider(sliderObj); }; // Watch ng-model, min, and max - if any change, update the slider if (angular.isDefined(parsedOptions)) { // Values may be async, so wait until it returns before // initializing the slider. // Use scope.$parent so that we can access data outside of the // isolate scope. // Assumption: "value as label for obj in array"-like syntax is being used parsedOptions.valuesFn(scope.$parent, ngModel).then(function (values) { optionsList = values; valuesArr = _.pluck(values, 'value'); buildMappedValueSlider(); }); } else if (angular.isObject(staggerStepObj)) { var staggerStepKeys = _.map(_.keys(staggerStepObj), function (key) { return parseFloat(key, 10); }); // Create the full array of values for (var i = 0, ii = staggerStepKeys.length; i < ii; i++) { var rangeMin = staggerStepKeys[i], rangeMax = (i < staggerStepKeys.length - 1) ? staggerStepKeys[i + 1] : scope.max, rangeStep = staggerStepObj[staggerStepKeys[i]], range = _.map(_.range(rangeMin, rangeMax, rangeStep), function (step) { // _.range doesn't create float ranges correctly, so fix this return parseFloat(accounting.toFixed(step, 3)); }); valuesArr = valuesArr.concat(range); } // Pare down the list so that it's between min & max valuesArr = _.filter(valuesArr, function (value) { return value >= scope.min && value < scope.max; }); // Add the max value for good measure valuesArr.push(scope.max); buildMappedValueSlider(); } else { sliderObj = { range: 'min', min: scope.min, max: scope.max, value: angular.isObject(modelMapObj) ? _.invert(modelMapObj)[scope.value] : scope.value, step: scope.step || (scope.max - scope.min) / STEPS }; slider.slider(sliderObj); } var throttledModelUpdate = _.throttle(function (sliderValue) { var modelValue = sliderValue; // Find the real model value if (angular.isObject(staggerStepObj) || angular.isDefined(parsedOptions)) { modelValue = valuesArr[sliderValue]; } // If we've defined a model mapping, perform the translation // before setting the model value modelValue = angular.isObject(modelMapObj) ? modelMapObj[modelValue] : modelValue; // Attach label to parent scope (bad!) if (angular.isDefined(parsedOptions)) { scope.$parent.sliderLabel = _.findWhere(optionsList, { value: modelValue }).label; } scope.$apply(function () { // Push slider value (or mapped value) out to the model ngModel.$setViewValue(modelValue); }); }, UPDATE_DELAY_MS); slider.bind({ slide: function (event, ui) { throttledModelUpdate(ui.value); } }); // Initialize the slider // TODO: Watch these values and re-init the slider based on outside changes // so that the slider can be updated dynamically if (attrs.reset === "on") { scope.$watch(function () { return ngModel.$modelValue; }, function (newVal, oldVal) { if (newVal !== oldVal) { buildMappedValueSlider(); } }); } scope.ticks = _.range(NUM_TICKS); } };} ]);angular.module('fossa').run(['$templateCache', 'variation', function ($templateCache, variation) { if (variation.getVariationByName('style') === 'tactile') { $templateCache.put('ig-desired-loan-amount-slider', '<label for="desired-loan-amount-slider" class="control-label" ng-bind-html="groupUtil.getProp(\'label\', \'How much would you like to borrow?\')"></label>' + '<div class="row">' + '<div class="col-xs-10 col-xs-offset-1">' + '<div slider label-tip reset={{resetSlider}} ng-model="inputs.desiredLoanAmount" label-min="$0" label-max="$400K" show-label-max-plus slider-options="item.value as item.name for item in lists.desiredLoanAmount" />' + '<span ng-show="formData.returnToHE" class="range-update">Range has been updated</span>' + '</div>' + '</div>' ); }}]); 解决方案 这篇关于如何将工具提示添加到角度1 ui滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！