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>
It appears all the attributes have their own scopes (on the
meobject) and thusthisis 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...
I'm using ES6 classes for my controllers, and the
ControllerName as ctrlsyntax so I usectrl.somethinginstead of$scope.something.For example, the function
moveToCell(bounce to thedropattr) can not accessthis.gridon the class.