Skip to content

Commit a2bccee

Browse files
author
Kevin Dietrich
committed
Implemented watchers
1 parent 1777840 commit a2bccee

5 files changed

Lines changed: 45 additions & 16 deletions

File tree

‎demo/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ <h1>gridstack-angular demo</h1>
3131
<p>{{widgets}}</p>
3232
<div>
3333
<a class="btn btn-primary" ng-click="addWidget()" href="#">Add Widget</a>
34+
<a class="btn btn-primary" ng-click="moveWidget()" href="#">Move Widget</a>
3435
</div>
3536
<br>
3637
<div class="row">
@@ -72,6 +73,12 @@ <h1>gridstack-angular demo</h1>
7273
$scope.widgets.push(newWidget);
7374
};
7475

76+
$scope.moveWidget = function() {
77+
$scope.widgets[0].x = 1;
78+
$scope.widgets[0].width = 2;
79+
$scope.widgets[0].height = 2;
80+
};
81+
7582
$scope.removeWidget = function(w) {
7683
var index = $scope.widgets.indexOf(w);
7784
$scope.widgets.splice(index, 1);

‎dist/gridstack-angular.js‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,23 @@ var app = angular.module('gridstack-angular');
1414

1515
app.controller('GridstackController', ['$scope', function($scope) {
1616

17-
var gridstack = null;
17+
this.gridstack = null;
1818

1919
this.init = function(element, options) {
20-
gridstack = element.gridstack(options).data('gridstack');
21-
return gridstack;
20+
this.gridstack = element.gridstack(options).data('gridstack');
21+
return this.gridstack;
2222
};
2323

2424
this.removeItem = function(element) {
25-
if(gridstack) {
26-
return gridstack.removeWidget(element, false);
25+
if(this.gridstack) {
26+
return this.gridstack.removeWidget(element, false);
2727
}
2828
return null;
2929
};
3030

3131
this.addItem = function(element) {
32-
if(gridstack) {
33-
gridstack.makeWidget(element);
32+
if(this.gridstack) {
33+
this.gridstack.makeWidget(element);
3434
return element;
3535
}
3636
return null;
@@ -142,6 +142,12 @@ app.directive('gridstackItem', ['$timeout', function($timeout) {
142142
scope.onItemAdded({item: item});
143143
});
144144

145+
var propertyChanged = function(newVal, oldVal) {
146+
if(newVal != oldVal) {
147+
controller.gridstack.update($(element), scope.gsItemX, scope.gsItemY, scope.gsItemWidth, scope.gsItemHeight);
148+
}
149+
};
150+
145151
scope.$watch(function() { return $(element).attr('data-gs-id'); }, function(val) {
146152
scope.gsItemId = val;
147153
});
@@ -162,6 +168,11 @@ app.directive('gridstackItem', ['$timeout', function($timeout) {
162168
scope.gsItemHeight = Number(val);
163169
});
164170

171+
scope.$watch('gsItemX', propertyChanged);
172+
scope.$watch('gsItemY', propertyChanged);
173+
scope.$watch('gsItemWidth', propertyChanged);
174+
scope.$watch('gsItemHeight', propertyChanged);
175+
165176
element.bind('$destroy', function() {
166177
var item = element.data('_gridstack_node');
167178
scope.onItemRemoved({item: item});

‎dist/gridstack-angular.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/gridstack.controller.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,23 @@ var app = angular.module('gridstack-angular');
77

88
app.controller('GridstackController', ['$scope', function($scope) {
99

10-
var gridstack = null;
10+
this.gridstack = null;
1111

1212
this.init = function(element, options) {
13-
gridstack = element.gridstack(options).data('gridstack');
14-
return gridstack;
13+
this.gridstack = element.gridstack(options).data('gridstack');
14+
return this.gridstack;
1515
};
1616

1717
this.removeItem = function(element) {
18-
if(gridstack) {
19-
return gridstack.removeWidget(element, false);
18+
if(this.gridstack) {
19+
return this.gridstack.removeWidget(element, false);
2020
}
2121
return null;
2222
};
2323

2424
this.addItem = function(element) {
25-
if(gridstack) {
26-
gridstack.makeWidget(element);
25+
if(this.gridstack) {
26+
this.gridstack.makeWidget(element);
2727
return element;
2828
}
2929
return null;

‎src/gridstackitem.directive.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,12 @@ app.directive('gridstackItem', ['$timeout', function($timeout) {
4343
scope.onItemAdded({item: item});
4444
});
4545

46+
var propertyChanged = function(newVal, oldVal) {
47+
if(newVal != oldVal) {
48+
controller.gridstack.update($(element), scope.gsItemX, scope.gsItemY, scope.gsItemWidth, scope.gsItemHeight);
49+
}
50+
};
51+
4652
scope.$watch(function() { return $(element).attr('data-gs-id'); }, function(val) {
4753
scope.gsItemId = val;
4854
});
@@ -63,6 +69,11 @@ app.directive('gridstackItem', ['$timeout', function($timeout) {
6369
scope.gsItemHeight = Number(val);
6470
});
6571

72+
scope.$watch('gsItemX', propertyChanged);
73+
scope.$watch('gsItemY', propertyChanged);
74+
scope.$watch('gsItemWidth', propertyChanged);
75+
scope.$watch('gsItemHeight', propertyChanged);
76+
6677
element.bind('$destroy', function() {
6778
var item = element.data('_gridstack_node');
6879
scope.onItemRemoved({item: item});

0 commit comments

Comments
 (0)