Функция углового контроллера не получает данные от функции обратного вызова директивы

Я создаю ползунок диапазона, который будет использоваться в панели поиска. Мне нужно вернуть значения, установленные ползунком, чтобы его можно было применить в модели поиска для дальнейшего использования. У меня есть функция обратного вызова в моей директиве, и хотя она правильно вызывает функцию контроллера, данные не передаются. Любые предложения принимаются

Моя директива:

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 содержимое в директиве.

В очередной раз благодарим за помощь.


angularjs angularjs-directive
person JimP    schedule 31.12.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы называете параметр data, когда вызываете внутри директивы:

scope.saveRangeData({ data: scope.rangeData });

Если вы хотите это сделать, вам нужно переименовать имя параметра в разметке HTML:

save-range-data="saveRangeValues( data )"></div>

Структура объекта, вызываемая внутри директивы, отображается на имена параметров в разметке. В этом руководстве это хорошо объясняется:

Здесь очень важно отметить одну вещь: объект, переданный в качестве аргумента, должен иметь те же ключевые значения (то есть newRating), которые были переданы в html-вызове функции. Итак, если вы вызвали функцию sendRatingToServer () как sendRatingToServer (rating, stars), ее необходимо вызвать в директиве с теми же ключами, то есть scope.onRatingSelected ({rating: index + 1, stars: 5});

person Davin Tryon    schedule 31.12.2013
comment
Ты обалденный! Я смотрел на это 12 часов и знал, что чего-то не хватает. Спасибо за быстрый ответ. Я приму этот ответ, как только SO позволит мне. - person JimP; 31.12.2013
comment
Это действительно помогает мне. Я пропустил ту часть, о которой вы упомянули. - person JimiOr2; 29.01.2016