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

时间:2013-12-31 17:36:23

标签: angularjs angularjs-directive

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

我的指示:

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

再次感谢您的帮助。

1 个答案:

答案 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});