CODEWITHSUNDEEP
angularjsangularjs-directive
JimP
JimP

Reputation: 1076

Angular controller function not receiving data from directive callback function

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.

Upvotes: 0

Views: 467

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

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

Upvotes: 4

Related Questions