Angular controller function not receiving data from directive callback function

Question

I am building a range slider to be used in a search panel. I need to return the values set by the slider so it can be applied into the search model for later use. I have a callback function in my directive and while it does call the controller function correctly, the data isn't getting passed. Any suggestions are apprecaited

My 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 });
      }
    });

  }
};
}]);

Here is my controller function:

$scope.saveRangeValues = function( rangeData ) {
  console.log( "saveRangeValues called " );
  console.log( rangeData );
};

And the HTML where the directive is called:

    <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>

As I said previously, the function is getting called and the console.log fires off, but the rangeData object is completely empty. And yes, I checked to make sure that rangeData does have content in the directive.

Thanks again for your help.

Davin Tryon · Accepted Answer · 2013-12-31 17:41:56Z

4

You are naming the parameter data when you call inside the directive:

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

If you want to do this, then you have to rename the paramter name in the HTML markup:

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

The object structure called inside the directive is mapped on to the parameter names in the markup. This tutorial explains it well:

One thing extremely important to note over here is that the object passed as argument should have the same key values (i.e. newRating) as they were passed in the html call to the function. So if you had called the sendRatingToServer() function as sendRatingToServer(rating, stars) it needs to be called in the directive with the same keys i.e., scope.onRatingSelected({rating: index+1, stars: 5});

answered Dec 31, 2013 at 17:41

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JimP Over a year ago

You are AWESOME! I've been staring at this for 12 hours and I knew I was missing something. Thanks for the fast reply. I will accept this answer as soon as SO allows me to.

JimiOr2 Over a year ago

This is really help me. I've missed the portion that you mentioned.

Collectives™ on Stack Overflow

Angular controller function not receiving data from directive callback function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related