Question

我正在构建一个在搜索面板中使用的范围滑块。我需要返回滑块设置的值，以便将其应用到搜索模型中供以后使用。我的指令中有一个回调函数，虽然它确实正确调用了控制器函数，但数据没有通过。任何建议都是适用的

我的指示：

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确实在指令中有内容。

再次感谢您的帮助。

Answer 1

当您在指令内部调用时，您正在命名参数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}）;

Angular控制器函数不从指令回调函数接收数据

1 个答案: