如何将工具提示添加到角度1 ui滑块 [英] How to add tooltip to angular 1 ui slider

问题描述

我正在创建一个角度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>'
）; 
} 
}]）; 

解决方案

templateCache'，'

< blockquote> parseOptions'，function（

templateCache，

I am creating an angular ui slider directive. But unable to add tooltip for slider control. Please suggest

What 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>'
        );
    }
}]);

解决方案

templateCache', '

parseOptions', function (

templateCache,

这篇关于如何将工具提示添加到角度1 ui滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！