Skip to content

Scope of drop function #16

@techniq

Description

@techniq

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions