angular-drag-drop icon indicating copy to clipboard operation
angular-drag-drop copied to clipboard

Scope of `drop` function

Open techniq opened this issue 10 years ago • 2 comments

It appears all the attributes have their own scopes (on the me object) and thus this is not within the scope of a controller, but it's own scope (scope not $scope that is).

Is there a reason the directives don't use...

return {
    restrict: 'A',
    scope: {
        drop:  '&',
        enter: '&',
        leave: '&'
    },
    link: function ( $scope, $elem, $attr ) {
        ...
    }

I'm using ES6 classes for my controllers, and the ControllerName as ctrl syntax so I use ctrl.something instead of $scope.something.

For example, the function moveToCell (bounce to the drop attr) can not access this.grid on the class.

class LocationsCtrl {

    constructor() {
        var rows = 5;
        var columns = 5;
        this.grid = [];
        for(var row = 0; row < rows; row++) {
            this.grid[row] = [];
            for(var column = 0; column < columns; column++) {
                this.grid[row][column] = { row: row, column: column, location: null };
            }
        }

        _.forEach(this.locations, (location) => {
            console.log(location);
            if (location.gridRow != null && location.gridColumn != null) {
                this.moveToCell(location, this.grid[location.gridRow][location.gridColumn]);
            }
        });
    }

    moveToCell(dragData, dropData, element) {
        // can not access `this.grid`, etc
    }
 <div ng-repeat="row in ctrl.grid" ng-init="rowIndex = $index">
    <div ng-repeat="cell in row track by $index"
         ng-class="{ empty: !cell.location }" class="cell"
         drop="ctrl.moveToCell"
         ng-model="cell"
         drag >
         {{ cell.location.title }}
         <span ng-click="ctrl.clearCell(cell)" ng-show="cell.location" class="fa fa-times remove"></span>
     </div>

techniq avatar Apr 25 '14 02:04 techniq

I did not use the scope object because I didn't want to isolate the scope, had few issues when I built it. But now I can se no problem not using it. I'll make a fix for it this weekend =)

fisshy avatar Apr 25 '14 04:04 fisshy

We could implement a fallback also. If no attribute is provided simple fallback to $cntrl.function. But one of these must be required.

fisshy avatar Apr 25 '14 04:04 fisshy