angular version repair afterChange change propagation

new version refs #HOT-36
handsontable · Sep 22, 2014 · f92d845 · f92d845
1 parent 6d61aa0
commit f92d845
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 39 deletions.
diff --git a/demo/js/ngHandsontableDemo.js b/demo/js/ngHandsontableDemo.js
@@ -76,11 +76,16 @@ angular.module('ngHandsontableDemo',
 					if( $scope.db.dynamicColumns[0].title == 'ID') {
 						$scope.db.dynamicColumns[3].readOnly = true;
 						$scope.db.dynamicColumns.shift();
-
+						$scope.afterChange = function () {
+							console.log('afterChange: ','when ID column has been removed');
+						};
 
 					} else {
 						$scope.db.dynamicColumns[2].readOnly = false;
 						$scope.db.dynamicColumns.unshift({data: 'id', title: 'ID'});
+						$scope.afterChange = function () {
+							console.log('afterChange: ','when ID column has been added');
+						};
 					}
 					$scope.$apply();
 				}, 3000);

diff --git a/demo/ngHandsontable.html b/demo/ngHandsontable.html
@@ -24,25 +24,25 @@ <h1>ngHandsontable - Handsontable with Angular</h1>
 		or in separated attributes like <code>minSpareRows = "minSpareRows"</code>, <code>rowHeaders = "false"</code>
 	</p>
 
-	<hot-table
-		settings ="{colHeaders: colHeaders, contextMenu: ['row_above', 'row_below', 'remove_row'] }"
-		rowHeaders = "false"
-		minSpareRows = "minSpareRows"
-		datarows="db.items"
-		height="300"
-		width="700">
-		<hot-column data="id"                  title="'ID'"></hot-column>
-		<hot-column data="name.first"          title="'First Name'"  type="grayedOut"  readOnly></hot-column>
-		<hot-column data="name.last"           title="'Last Name'"   type="grayedOut"  readOnly></hot-column>
-		<hot-column data="address"             title="'Address'" width="150"></hot-column>
-		<hot-column data="product.description" title="'Favorite food'" type="'autocomplete'">
-			<hot-autocomplete datarows="description in product.options"></hot-autocomplete>
-		</hot-column>
-		<hot-column data="price"               title="'Price'"     type="'numeric'"  width="80"  format="'$ 0,0.00'" ></hot-column>
-		<hot-column data="isActive"            title="'Is active'" type="'checkbox'" width="65"  checkedTemplate="'Yes'" uncheckedTemplate="'No'"></hot-column>
-	</hot-table>
+	<!--<hot-table-->
+		<!--settings ="{colHeaders: colHeaders, contextMenu: ['row_above', 'row_below', 'remove_row'], afterChange: afterChange }"-->
+		<!--rowHeaders = "false"-->
+		<!--minSpareRows = "minSpareRows"-->
+		<!--datarows="db.items"-->
+		<!--height="300"-->
+		<!--width="700">-->
+		<!--<hot-column data="id"                  title="'ID'"></hot-column>-->
+		<!--<hot-column data="name.first"          title="'First Name'"  type="grayedOut"  readOnly></hot-column>-->
+		<!--<hot-column data="name.last"           title="'Last Name'"   type="grayedOut"  readOnly></hot-column>-->
+		<!--<hot-column data="address"             title="'Address'" width="150"></hot-column>-->
+		<!--<hot-column data="product.description" title="'Favorite food'" type="'autocomplete'">-->
+			<!--<hot-autocomplete datarows="description in product.options"></hot-autocomplete>-->
+		<!--</hot-column>-->
+		<!--<hot-column data="price"               title="'Price'"     type="'numeric'"  width="80"  format="'$ 0,0.00'" ></hot-column>-->
+		<!--<hot-column data="isActive"            title="'Is active'" type="'checkbox'" width="65"  checkedTemplate="'Yes'" uncheckedTemplate="'No'"></hot-column>-->
+	<!--</hot-table>-->
 
-	<hot-table settings="{rowHeaders: false, contextMenu: true}" colHeaders="true" datarows="db.items" columns="db.dynamicColumns" height="300" width="700"></hot-table>
+	<hot-table settings="{rowHeaders: false, contextMenu: true, afterChange: afterChange}" colHeaders="true" datarows="db.items" columns="db.dynamicColumns" height="300" width="700"></hot-table>
 	<input type="text" ng-model="db.items[0].address" style="width: 300px">
 </body>
 </html>
diff --git a/src/directives/ngHandsontable.js b/src/directives/ngHandsontable.js
@@ -32,6 +32,7 @@ angular.module('ngHandsontable.directives', [])
 						scope.htSettings = {};
 					}
 					scope.htSettings['data'] = scope.datarows;
+
 					angular.extend(scope.htSettings, settingFactory.setHandsontableSettingsFromScope(htOptions, scope));
 
 					if(scope.htSettings.columns) {
@@ -63,27 +64,31 @@ angular.module('ngHandsontable.directives', [])
 
 
 					var columnSetting = attrs.columns;
-					if (columnSetting) {
-						/***
-						 * Check if settings has been changed
-						 */
-						scope.$parent.$watch(
-							function () {
-								var settingKeys = columnSetting.split('.'),
-									settingToCheck = scope.$parent;
-
-								while(settingKeys.length > 0) {
+
+					/***
+					 * Check if settings has been changed
+					 */
+					scope.$parent.$watch(
+						function () {
+
+							var settingToCheck = scope.$parent;
+
+							if (columnSetting) {
+								var settingKeys = columnSetting.split('.');
+								while (settingKeys.length > 0) {
 									var key = settingKeys.shift();
 									settingToCheck = settingToCheck[key];
 								}
 								return angular.toJson([settingToCheck]);
-							},
-							function () {
-								console.log(scope.htSettings.columns);
-								settingFactory.updateHandsontableSettings(element, scope.htSettings);
 							}
-						);
-					}
+
+						},
+						function () {
+							angular.extend(scope.htSettings, settingFactory.setHandsontableSettingsFromScope(htOptions, scope.$parent));
+							settingFactory.updateHandsontableSettings(element, scope.htSettings);
+						}
+					);
+
 
 					/***
 					 * Check if data has been changed

diff --git a/src/services/settingFactory.js b/src/services/settingFactory.js
@@ -28,6 +28,7 @@ angular.module('ngHandsontable.services', [])
 				 * @param settings
 				 */
 				updateHandsontableSettings: function (element, settings) {
+					console.log(settings.afterChange);
 					var container = $(element).find('.' + this.containerClassName);
 					container.handsontable('updateSettings', settings);
 				},
@@ -52,7 +53,6 @@ angular.module('ngHandsontable.services', [])
 						settings = {},
 						allOptions = angular.extend({}, scopeOptions);
 
-					console.log(scopeOptions);
 					angular.extend(allOptions, scopeOptions.settings);
 
 					for (i in htOptions) {
@@ -103,9 +103,6 @@ angular.module('ngHandsontable.services', [])
 						var data = dataSet[row];
 						if (data) {
 							var options = column.optionList;
-
-							console.log(options);
-
 							if(options.object) {
 								var objKeys = options.object.split('.')
 									,paramObject = data;