我正在构建一个在搜索面板中使用的范围滑块。我需要返回滑块设置的值,以便将其应用到搜索模型中供以后使用。我的指令中有一个回调函数,虽然它确实正确调用了控制器函数,但数据没有通过。任何建议都是适用的
我的指示:
MyCompany.directive('rangeSlider', [ function() {
var sliderTemplate = "<div>" +
"<div id='{{rangeData.slider}}'></div>" +
"<input id='{{rangeData.lowerId}}' " +
" type='text' " +
" class='span1 text-center'/>" +
" <div class='middle-marker'>to</div>" +
"<input id='{{rangeData.upperId}}' " +
" type='text' " +
" class='span1 text-center pull-right'/>" +
"</div>";
return {
restrict: 'A',
replace: true,
template: sliderTemplate,
scope: {
saveRangeData: '&'
},
link: function ( scope, element, attrs ) {
scope.rangeData = [];
scope.rangeData.slider = attrs.slider;
scope.rangeData.lowerId = attrs.lowerId;
scope.rangeData.lowerRange = attrs.lowerRange;
scope.rangeData.upperId = attrs.upperId;
scope.rangeData.upperRange = attrs.upperRange;
scope.$watch( element, function(){
$( "#" + scope.rangeData.slider ).slider({
range: true,
min: Number( scope.rangeData.lowerRange ),
max: Number( scope.rangeData.upperRange ),
values: [ Number( scope.rangeData.lowerRange ), Number( scope.rangeData.upperRange ) ],
slide: function( event, ui ) {
$( "#" + scope.rangeData.lowerId ).val( ui.values[ 0 ] );
$( "#" + scope.rangeData.upperId ).val( ui.values[ 1 ] );
scope.saveRangeData({ data: scope.rangeData });
}
});
}
};
}]);
这是我的控制器功能:
$scope.saveRangeValues = function( rangeData ) {
console.log( "saveRangeValues called " );
console.log( rangeData );
};
调用指令的HTML:
<div class="cc-slider span4 pull-right kurz"
name="val-acc-score"
data-range-slider
data-slider="val-acc-score-slider"
data-lower-id="lower-val-acc-score"
data-lower-range="0"
data-upper-id="upper-val-acc-score"
data-upper-range="10"
save-range-data="saveRangeValues( rangeData )"></div>
正如我之前所说,函数被调用,console.log
触发,但rangeData对象完全为空。是的,我检查确保rangeData确实在指令中有内容。
再次感谢您的帮助。
答案 0 :(得分:4)
当您在指令内部调用时,您正在命名参数data
:
scope.saveRangeData({ data: scope.rangeData });
如果你想这样做,那么你必须重命名 HTML标记中的参数名称:
save-range-data="saveRangeValues( data )"></div>
指令内部调用的对象结构映射到标记中的参数名称。 This tutorial解释得很好:
这里需要注意的一件事是对象 作为参数传递的应该具有相同的键值(即newRating) 它们是在函数的html调用中传递的。所以,如果你有 将sendRatingToServer()函数称为sendRatingToServer(评级, 星号)它需要在指令中用相同的键调用,即, scope.onRatingSelected({rating:index + 1,stars:5});