Fatal编程技术网
  • angularjs/
  • Angularjs angular js v-1.2.20带有角度滑块的问题

Angularjs angular js v-1.2.20带有角度滑块的问题

angularjs

Angularjs angular js v-1.2.20带有角度滑块的问题,angularjs,version,Angularjs,Version,我正在尝试使用AngularJSV-1.2.20实现 <div ng-controller="ItemCtrl"> <slider custom-floor="item.minAge" floor="100" custom-ceiling="item.maxAge" ceiling="1000" step="10" precision="2" ng-model="item.cost"></slider> </div> 包含所有必要的js和

我正在尝试使用AngularJSV-1.2.20实现

<div ng-controller="ItemCtrl">
  <slider custom-floor="item.minAge" floor="100" custom-ceiling="item.maxAge" ceiling="1000" step="10" precision="2" ng-model="item.cost"></slider>
</div>
包含所有必要的js和css文件后，将显示滑块，但不会显示地板和天花板值（以及自定义地板和自定义天花板值）

控制台中没有错误。但是当我在脚本中使用angular v-1.1.4而不更改任何代码时，一切似乎都很好

有人知道这个问题吗。如果我需要使用带角度v-1.2.20的滑块，有什么解决方法吗

谢谢你的帮助

首先为我的英语感到抱歉，angular js的ng bind html不安全被删除，因此我们现在需要在html代码中直接使用“{}”，我只需在html中调用更改属性，angular slider至少可以使用我使用的angular 1.2.9，这里是一个完整的示例

   <!DOCTYPE html>
<html ng-app="APP">
<head>
    <meta charset="UTF-8">
    <title>angular-slider example</title>
    <link rel="stylesheet" href="http://www.directiv.es/application/html/js/prajwalkman/angular-slider/angular-slider.min.css" media="all">
</head>
<body>

<div style="width:600px;" ng-controller="ItemCtrl">
  <slider floor="0" ceiling="100" step="1" precision="2" ng-model="cost"></slider>
</div>


    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script>// Generated by CoffeeScript 1.6.2
(function() {
var MODULE_NAME, SLIDER_TAG, angularize, bindHtml, gap, halfWidth, hide, inputEvents, module, offset, offsetLeft, pixelize, qualifiedDirectiveDefinition, roundStep, show, sliderDirective, width;
MODULE_NAME = 'uiSlider';
SLIDER_TAG = 'slider';
angularize = function(element) {
return angular.element(element);
};
pixelize = function(position) {
return "" + position + "px";
};
hide = function(element) {
return element.css({
opacity: 0
});
};
show = function(element) {
return element.css({
opacity: 1
});
};
offset = function(element, position) {
return element.css({
left: position
});
};
halfWidth = function(element) {
return element[0].offsetWidth / 2;
};
offsetLeft = function(element) {
return element[0].offsetLeft;
};
width = function(element) {
return element[0].offsetWidth;
};
gap = function(element1, element2) {
return offsetLeft(element2) - offsetLeft(element1) - width(element1);
};
bindHtml = function(element, html) {

};
roundStep = function(value, precision, step, floor) {
var decimals, remainder, roundedValue, steppedValue;
if (floor == null) {
floor = 0;
}
if (step == null) {
step = 1 / Math.pow(10, precision);
}
remainder = (value - floor) % step;
steppedValue = remainder > (step / 2) ? value + step - remainder : value - remainder;
decimals = Math.pow(10, precision);
roundedValue = steppedValue * decimals / decimals;
return roundedValue.toFixed(precision);
};
inputEvents = {
mouse: {
start: 'mousedown',
move: 'mousemove',
end: 'mouseup'
},
touch: {
start: 'touchstart',
move: 'touchmove',
end: 'touchend'
}
};
sliderDirective = function($timeout) {
return {
restrict: 'EA',
scope: {
floor: '@',
ceiling: '@',
step: '@',
precision: '@',
ngModel: '=?',
ngModelLow: '=?',
ngModelHigh: '=?',
translate: '&'
},
template: '<span class="bar"></span><span class="bar selection"></span><span class="pointer"></span><span class="pointer"></span><span class="bubble selection"></span><span class="bubble limit"> {{floor}}</span><span class="bubble limit">{{ ceiling}}</span><span class="bubble">{{ngModel}}</span><span class="bubble"></span><span class="bubble"></span>',
compile: function(element, attributes) {
var ceilBub, cmbBub, e, flrBub, fullBar, highBub, lowBub, maxPtr, minPtr, range, refHigh, refLow, selBar, selBub, watchables, _i, _len, _ref, _ref1;
if (attributes.translate) {
attributes.$set('translate', "" + attributes.translate + "(value)");
}
range = (attributes.ngModel == null) && ((attributes.ngModelLow != null) && (attributes.ngModelHigh != null));
_ref = (function() {
var _i, _len, _ref, _results;
_ref = element.children();
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
e = _ref[_i];
_results.push(angularize(e));
}
return _results;
})(), fullBar = _ref[0], selBar = _ref[1], minPtr = _ref[2], maxPtr = _ref[3], selBub = _ref[4], flrBub = _ref[5], ceilBub = _ref[6], lowBub = _ref[7], highBub = _ref[8], cmbBub = _ref[9];
refLow = range ? 'ngModelLow' : 'ngModel';
refHigh = 'ngModelHigh';
bindHtml(selBub, "'Range: ' + translate({value: diff})");
bindHtml(lowBub, "translate({value: " + refLow + "})");
bindHtml(highBub, "translate({value: " + refHigh + "})");
bindHtml(cmbBub, "translate({value: " + refLow + "}) + ' - ' + translate({value: " + refHigh + "})");
if (!range) {
_ref1 = [selBar, maxPtr, selBub, highBub, cmbBub];
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
element = _ref1[_i];
element.remove();
}
}
watchables = [refLow, 'floor', 'ceiling'];
if (range) {
watchables.push(refHigh);
}
return {
post: function(scope, element, attributes) {
var barWidth, boundToInputs, dimensions, maxOffset, maxValue, minOffset, minValue, ngDocument, offsetRange, pointerHalfWidth, updateDOM, valueRange, w, _j, _len1;
boundToInputs = false;
ngDocument = angularize(document);
if (!attributes.translate) {
scope.translate = function(value) {
return value.value;
};
}
pointerHalfWidth = barWidth = minOffset = maxOffset = minValue = maxValue = valueRange = offsetRange = void 0;
dimensions = function() {
var value, _j, _len1, _ref2, _ref3;
if ((_ref2 = scope.precision) == null) {
scope.precision = 0;
}
if ((_ref3 = scope.step) == null) {
scope.step = 1;
}
for (_j = 0, _len1 = watchables.length; _j < _len1; _j++) {
value = watchables[_j];
scope[value] = roundStep(parseFloat(scope[value]), parseInt(scope.precision), parseFloat(scope.step), parseFloat(scope.floor));
}
scope.diff = roundStep(scope[refHigh] - scope[refLow], parseInt(scope.precision), parseFloat(scope.step), parseFloat(scope.floor));
pointerHalfWidth = halfWidth(minPtr);
barWidth = width(fullBar);
minOffset = 0;
maxOffset = barWidth - width(minPtr);
minValue = parseFloat(attributes.floor);
maxValue = parseFloat(attributes.ceiling);
valueRange = maxValue - minValue;
return offsetRange = maxOffset - minOffset;
};
updateDOM = function() {
var adjustBubbles, bindToInputEvents, fitToBar, percentOffset, percentToOffset, percentValue, setBindings, setPointers;
dimensions();
percentOffset = function(offset) {
return ((offset - minOffset) / offsetRange) * 100;
};
percentValue = function(value) {
return ((value - minValue) / valueRange) * 100;
};
percentToOffset = function(percent) {
return pixelize(percent * offsetRange / 100);
};
fitToBar = function(element) {
return offset(element, pixelize(Math.min(Math.max(0, offsetLeft(element)), barWidth - width(element))));
};
setPointers = function() {
var newHighValue, newLowValue;
offset(ceilBub, pixelize(barWidth - width(ceilBub)));
newLowValue = percentValue(scope[refLow]);
offset(minPtr, percentToOffset(newLowValue));
offset(lowBub, pixelize(offsetLeft(minPtr) - (halfWidth(lowBub)) + pointerHalfWidth));
if (range) {
newHighValue = percentValue(scope[refHigh]);
offset(maxPtr, percentToOffset(newHighValue));
offset(highBub, pixelize(offsetLeft(maxPtr) - (halfWidth(highBub)) + pointerHalfWidth));
offset(selBar, pixelize(offsetLeft(minPtr) + pointerHalfWidth));
selBar.css({
width: percentToOffset(newHighValue - newLowValue)
});
offset(selBub, pixelize(offsetLeft(selBar) + halfWidth(selBar) - halfWidth(selBub)));
return offset(cmbBub, pixelize(offsetLeft(selBar) + halfWidth(selBar) - halfWidth(cmbBub)));
}
};
adjustBubbles = function() {
var bubToAdjust;
fitToBar(lowBub);
bubToAdjust = highBub;
if (range) {
fitToBar(highBub);
fitToBar(selBub);
if (gap(lowBub, highBub) < 10) {
hide(lowBub);
hide(highBub);
fitToBar(cmbBub);
show(cmbBub);
bubToAdjust = cmbBub;
} else {
show(lowBub);
show(highBub);
hide(cmbBub);
bubToAdjust = highBub;
}
}
if (gap(flrBub, lowBub) < 5) {
hide(flrBub);
} else {
if (range) {
if (gap(flrBub, bubToAdjust) < 5) {
hide(flrBub);
} else {
show(flrBub);
}
} else {
show(flrBub);
}
}
if (gap(lowBub, ceilBub) < 5) {
return hide(ceilBub);
} else {
if (range) {
if (gap(bubToAdjust, ceilBub) < 5) {
return hide(ceilBub);
} else {
return show(ceilBub);
}
} else {
return show(ceilBub);
}
}
};
bindToInputEvents = function(pointer, ref, events) {
var onEnd, onMove, onStart;
onEnd = function() {
pointer.removeClass('active');
ngDocument.unbind(events.move);
return ngDocument.unbind(events.end);
};
onMove = function(event) {
var eventX, newOffset, newPercent, newValue;
eventX = event.clientX || event.touches[0].clientX;
newOffset = eventX - element[0].getBoundingClientRect().left - pointerHalfWidth;
newOffset = Math.max(Math.min(newOffset, maxOffset), minOffset);
newPercent = percentOffset(newOffset);
newValue = minValue + (valueRange * newPercent / 100.0);
if (range) {
if (ref === refLow) {
if (newValue > scope[refHigh]) {
ref = refHigh;
minPtr.removeClass('active');
maxPtr.addClass('active');
}
} else {
if (newValue < scope[refLow]) {
ref = refLow;
maxPtr.removeClass('active');
minPtr.addClass('active');
}
}
}
newValue = roundStep(newValue, parseInt(scope.precision), parseFloat(scope.step), parseFloat(scope.floor));
scope[ref] = newValue;
return scope.$apply();
};
onStart = function(event) {
pointer.addClass('active');
dimensions();
event.stopPropagation();
event.preventDefault();
ngDocument.bind(events.move, onMove);
return ngDocument.bind(events.end, onEnd);
};
return pointer.bind(events.start, onStart);
};
setBindings = function() {
var bind, inputMethod, _j, _len1, _ref2, _results;
boundToInputs = true;
bind = function(method) {
bindToInputEvents(minPtr, refLow, inputEvents[method]);
return bindToInputEvents(maxPtr, refHigh, inputEvents[method]);
};
_ref2 = ['touch', 'mouse'];
_results = [];
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
inputMethod = _ref2[_j];
_results.push(bind(inputMethod));
}
return _results;
};
setPointers();
adjustBubbles();
if (!boundToInputs) {
return setBindings();
}
};
$timeout(updateDOM);
for (_j = 0, _len1 = watchables.length; _j < _len1; _j++) {
w = watchables[_j];
scope.$watch(w, updateDOM);
}
return window.addEventListener("resize", updateDOM);
}
};
}
};
};
qualifiedDirectiveDefinition = ['$timeout', sliderDirective];
module = function(window, angular) {
return angular.module(MODULE_NAME, []).directive(SLIDER_TAG, qualifiedDirectiveDefinition);
};
module(window, window.angular);
}).call(this);</script>
    <script>
    app = angular.module('APP', ['uiSlider']);
    app.controller('ItemCtrl', ['$scope', function($scope) {
    $scope.cost = 0
    }]);
    </script>
</body>
</html>


角度滑块示例
//由CoffeeScript 1.6.2生成
（功能（）{
变量模块名称、滑块标记、角度化、bindHtml、间隙、半宽度、隐藏、输入事件、模块、偏移量、偏移量、像素化、限定方向定义、圆步长、显示、滑块方向、宽度；
模块名称='uiSlider'；
SLIDER_标记=‘SLIDER’；
角度化=功能（元素）{
返回角度。元素（元素）；
};
像素化=功能（位置）{
返回“+”位置+“px”；
};
隐藏=函数（元素）{
返回元素.css({
不透明度：0
});
};
显示=功能（元素）{
返回元素.css({
不透明度：1
});
};
偏移=功能（元素、位置）{
返回元素.css({
左：位置
});
};
半宽度=函数（元素）{
返回元素[0]，offsetWidth/2；
};
offsetLeft=函数（元素）{
返回元素[0]。offsetLeft；
};
宽度=功能（元素）{
返回元素[0]。offsetWidth；
};
间隙=功能（元素1、元素2）{
返回offsetLeft（element2）-offsetLeft（element1）-宽度（element1）；
};
bindHtml=函数（元素，html）{
};
roundStep=功能（值、精度、步长、楼层）{
var小数、余数、舍入值、步进值；
if（floor==null）{
地板=0；
}
如果（步骤==null）{
步长=1/数学功率（10，精度）；
}
余数=（值-下限）%步；
步进值=余数>（步骤/2）？值+步进-余数：值-余数；
小数=数学功率（10，精度）；
舍入值=步进值*小数/小数；
返回roundedValue.toFixed（精度）；
};
inputEvents={
鼠标：{
开始：“mousedown”，
移动：“鼠标移动”，
结束：“鼠标”
},
触摸：{
开始：“touchstart”，
移动：“触摸移动”，
结束：'触摸结束'
}
};
sliderDirective=函数（$timeout）{
返回{
限制：“EA”，
范围：{
楼层：“@”，
上限：“@”，
步骤：“@”，
精度：'@'，
ngModel:“=？”，
ngModelLow:“=？”，
ngModelHigh:“=？”，
翻译：“&”
},
模板：{{floor}{{天花}{{ngModel}}}，
编译：函数（元素、属性）{
变量ceilBub、cmbBub、e、flrBub、fullBar、highBub、lowBub、maxPtr、minPtr、range、refHigh、refLow、selBar、selBub、watchables、_i、_len、_ref、_ref1；
if（attributes.translate）{
属性。$set（'translate'，“”+attributes.translate+“（value）”）；
}
范围=（attributes.ngModel==null）&&（（attributes.ngModelLow！=null）&&（attributes.ngModelHigh！=null））；
_ref=（函数（）{
变量i，len，ref，结果；
_ref=element.children（）；
_结果=[]；
对于（_i=0，_len=_ref.length；_i<_len；_i++）{
e=_ref[_i]；
_结果：推（角化（e））；
}
返回结果；
})（），fullBar=_-ref[0]，selBar=_-ref[1]，minPtr=_-ref[2]，maxPtr=_-ref[3]，selBub=_-ref[4]，flrBub=_-ref[5]，celibub=_-ref[6]，lowBub=_-ref[7]，highBub=_-ref[8]，cmbBub=_-ref[9]；
回流=范围？'ngModelLow'：'ngModel'；
refHigh='ngModelHigh'；
bindHtml（selBub，“'Range:'+translate（{value:diff}）”）；
bindHtml（lowBub，“翻译（{value:+refLow+“}）”）；
bindHtml（highBub，“translate（{value:+refHigh+“}）”）；
bindHtml（cmbBub，“翻译（{value:+refLow++}）+'-'+translate（{value:+refHigh++}）”）；
如果（！范围）{
_参考1=[selBar、maxPtr、selBub、highBub、cmbBub]；
对于（_i=0，_len=_ref1.length；_i<_len；_i++）{
元素=_ref1[_i]；
元素。移除（）；
}
}
手表=[回流焊，'地板'，'天花板']；
如果（范围）{
手表。推（参考高）；
}
返回{
post：功能（范围、元素、属性）{
变量条形宽度、边界输入、尺寸、最大偏移量、最大值、最小偏移量、最小值、ngDocument、偏移量范围、点半宽度、更新对象、值范围、w、_j、_len1；
boundToInputs=假；
ngDocument=角度化（文档）；
如果（！attributes.translate）{
scope.translate=函数（值）{
返回值.value；
};
}
pointerHalfWidth=barWidth=minOffset=maxOffset=minValue=maxValue=valueRange=offsetRange=void 0；
维度=函数（）{
var值，_j，_len1，_ref2，_ref3；
if（_ref2=范围精度）==null）{
scope.precision=0；
}
如果（_ref3=scope.step）==null）{
scope.step=1；
}
对于（_j=0，_len1=watchables.length；_j<_len1；_j++）{
值=可观察[_j]；
scope[value]=roundStep（parseFloat（scope[value]）、parseInt（scope.precision）、parseFloat（scope.step）、parseFloat（scope.floor））；
}
scope.diff=roundStep（scope[refHigh]-scope[refLow]、parseInt（scope.precision）、parseFloat（scope.step）、parseFloat（scope.floor））；
pointerHalfWidth=半宽（minPtr）；
barWidth=宽度（满杆）；
最小偏移=0；
maxOffset=条形宽度-宽度（minPtr）；
minValue=parseFloat（attributes.floor）；
maxValue=parseFloat（attributes.天花）；
valueRange=最大值-最小值；
return offsetRange=maxOffset-minOffset；
};
updateDOM=函数（）{
var调整气泡、bindToInputEvents、fitToBar、percentOffset、percentToOffset、percentValue、setBindings、设置指针；
尺寸（）；
百分比偏移=函数（偏移）{
返回（（偏移-最小偏移）/偏移范围）*100；
};
percentValue=函数（值）{
返回值（（value-minValue）/valueRange）*100；
};
percentToOffset=函数（百分比）{
返回像素化（百分比*偏移范围/100）；
};
fitToBar=函数（元素）{
返回偏移量（元素，像素化（Math.min（Math.max（0，offsetLeft（元素）），barWidth-width（元素）））；
};
设置指针=函数（）