Scope of `drop` function
Opened this issue · 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>
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 =)
We could implement a fallback also. If no attribute is provided simple fallback to $cntrl.function. But one of these must be required.