Angular Drag and Drop pass in Parameter within jqyoui-draggable

Question

I am using angular drag and drop, but i am having trouble passing a parameter in with onStart, onDrag, onDrop or onStop to the controller. I have a number of different variations like below but nothing seems to work:

jqyoui-draggable="{onStart: 'onSegmentDragStart(event, ui, timeSegment)'}"

jqyoui-draggable="{onStart: 'onSegmentDragStart({{timeSegment}})'}"

jqyoui-draggable="{onStart: 'onSegmentDragStart({{timeSegment : timesegment}})'}"

<div>
  <div ng-repeat="timeSegment in $ctrl.deal.deal_settings.dayparting.schedule[dayName]">
    <div  class="time-segment-grid"
          ng-style="$ctrl.timeSegmentGridStyle(timeSegment)"
          uib-tooltip="{{ $ctrl.timeSegmentGridTooltipText(timeSegment) }}"
          tooltip-append-to-body="true"
          tooltip-class="deal-dayparting-grid-tooltip"
          ng-click="$ctrl.toggleTimepicker(dayName)"

          data-drag="true"
          data-segment-id="$index",
          jqyoui-draggable="{
              onStart: 'onSegmentDragStart(timeSegment)',
              onDrag: 'onSegmentDragDrag(timeSegment)',
              onStop: 'onSegmentDragStop(timeSegment)',
          }"
      >
    </div>
  </div>
</div>

Answer 1

In another answer I found a possible solution for this where they declared the options and then used those in the template instead. So in your case, you could possibly add a new data attribute to hold data-timeSegment= "timeSegment", and then retrieve it in the handler:

$scope.dragOptions = {
    start: function(e) {
      $(e.currentTarget).data("data-timeSegment");
    },
    drag: function(e) {
      
    },
    stop: function(e) {
      
    },
    container: 'container-id'
}