Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit d2812fa

Browse files
l-linl-lin
committed
Correct issue when changing data with the angular way #63 
1 parent 91c22bd commit d2812fa

7 files changed

+124
-63
lines changed

‎demo/angularWayDataChange.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,14 @@
2727
$scope.persons.push(angular.copy($scope.person2Add));
2828
$scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1);
2929
};
30+
31+
$scope.modifyPerson = function (index) {
32+
$scope.persons.splice(index, 1, angular.copy($scope.person2Add))
33+
$scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1);
34+
};
35+
36+
$scope.removePerson = function (index) {
37+
$scope.persons.splice(index, 1);
38+
};
3039
});
3140
})();

‎demo/partials/angular_way_data_change.html

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,10 @@ <h1><i class="fa fa-play"></i>&nbsp;Changing data with the Angular way</h1>
6363
<td>{{ person.id }}</td>
6464
<td>{{ person.firstName }}</td>
6565
<td>{{ person.lastName }}</td>
66-
<td></td>
66+
<td>
67+
<button type="button" ng-click="modifyPerson($index)" class="btn btn-warning"><i class="fa fa-edit"></i></button>
68+
<button type="button" ng-click="removePerson($index)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
69+
</td>
6770
</tr>
6871
</tbody>
6972
</table>
@@ -117,7 +120,10 @@ <h1><i class="fa fa-play"></i>&nbsp;Changing data with the Angular way</h1>
117120
<td>{{ person.id }}</td>
118121
<td>{{ person.firstName }}</td>
119122
<td>{{ person.lastName }}</td>
120-
<td></td>
123+
<td>
124+
<button type="button" ng-click="modifyPerson($index)" class="btn btn-warning"><i class="fa fa-edit"></i></button>
125+
<button type="button" ng-click="removePerson($index)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
126+
</td>
121127
</tr>
122128
</tbody>
123129
</table>
@@ -151,6 +157,15 @@ <h1><i class="fa fa-play"></i>&nbsp;Changing data with the Angular way</h1>
151157
$scope.persons.push(angular.copy($scope.person2Add));
152158
$scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1);
153159
};
160+
161+
$scope.modifyPerson = function (index) {
162+
$scope.persons.splice(index, 1, angular.copy($scope.person2Add))
163+
$scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1);
164+
};
165+
166+
$scope.removePerson = function (index) {
167+
$scope.persons.splice(index, 1);
168+
};
154169
});
155170
</div>
156171
</tab>

‎demo/partials/sidebar.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
</li>
6363
<li ng-class="{'active': isActive('angularWayDataChange')}">
6464
<a ui-sref="angularWayDataChange">
65-
<i class="menu-icon fa fa-caret-right"></i>&nbsp;Update data with the Angular way
65+
<i class="menu-icon fa fa-caret-right"></i>&nbsp;Change data with the Angular way
6666
</a>
6767
</li>
6868
<li ng-class="{'active': isActive('withColReorder')}">

‎dist/angular-datatables.js

Lines changed: 49 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -364,10 +364,9 @@
364364
'datatables.options'
365365
]).directive('datatable', [
366366
'DT_DEFAULT_OPTIONS',
367-
'$timeout',
368367
'$DTBootstrap',
369368
'DTRendererFactory',
370-
function (DT_DEFAULT_OPTIONS, $timeout, $DTBootstrap, DTRendererFactory) {
369+
function (DT_DEFAULT_OPTIONS, $DTBootstrap, DTRendererFactory) {
371370
return {
372371
restrict: 'A',
373372
scope: {
@@ -376,31 +375,49 @@
376375
dtColumnDefs: '=',
377376
datatable: '@'
378377
},
379-
link: function ($scope, $elem) {
380-
DTRendererFactory.showLoading($elem);
381-
// Build options
382-
var isNgDisplay = $scope.datatable && $scope.datatable === 'ng', options;
383-
if (angular.isDefined($scope.dtOptions)) {
384-
options = {};
385-
angular.extend(options, $scope.dtOptions);
386-
// Set the columns
387-
if (angular.isArray($scope.dtColumns)) {
388-
options.aoColumns = $scope.dtColumns;
389-
}
390-
// Set the column defs
391-
if (angular.isArray($scope.dtColumnDefs)) {
392-
options.aoColumnDefs = $scope.dtColumnDefs;
393-
}
394-
// Integrate bootstrap (or not)
395-
if (options.integrateBootstrap) {
396-
$DTBootstrap.integrate(options);
397-
} else {
398-
$DTBootstrap.deIntegrate();
399-
}
378+
compile: function (tElm) {
379+
var _staticHTML = tElm[0].innerHTML;
380+
return function postLink($scope, $elem, iAttrs, ctrl) {
381+
ctrl.showLoading($elem);
382+
ctrl.render($elem, ctrl.buildOptions(), _staticHTML);
383+
};
384+
},
385+
controller: [
386+
'$scope',
387+
function ($scope) {
388+
this.showLoading = function ($elem) {
389+
DTRendererFactory.showLoading($elem);
390+
};
391+
this.buildOptions = function () {
392+
// Build options
393+
var options;
394+
if (angular.isDefined($scope.dtOptions)) {
395+
options = {};
396+
angular.extend(options, $scope.dtOptions);
397+
// Set the columns
398+
if (angular.isArray($scope.dtColumns)) {
399+
options.aoColumns = $scope.dtColumns;
400+
}
401+
// Set the column defs
402+
if (angular.isArray($scope.dtColumnDefs)) {
403+
options.aoColumnDefs = $scope.dtColumnDefs;
404+
}
405+
// Integrate bootstrap (or not)
406+
if (options.integrateBootstrap) {
407+
$DTBootstrap.integrate(options);
408+
} else {
409+
$DTBootstrap.deIntegrate();
410+
}
411+
}
412+
return options;
413+
};
414+
this.render = function ($elem, options, staticHTML) {
415+
var isNgDisplay = $scope.datatable && $scope.datatable === 'ng';
416+
// Render dataTable
417+
DTRendererFactory.fromOptions(options, isNgDisplay).render($scope, $elem, staticHTML);
418+
};
400419
}
401-
// Render dataTable
402-
DTRendererFactory.fromOptions(options, isNgDisplay).render($scope, $elem);
403-
}
420+
]
404421
};
405422
}
406423
]).directive('dtRows', [
@@ -858,9 +875,10 @@
858875
'datatables.options'
859876
]).factory('DTRendererFactory', [
860877
'$timeout',
878+
'$compile',
861879
'DTLoadingTemplate',
862880
'DT_DEFAULT_OPTIONS',
863-
function ($timeout, DTLoadingTemplate, DT_DEFAULT_OPTIONS) {
881+
function ($timeout, $compile, DTLoadingTemplate, DT_DEFAULT_OPTIONS) {
864882
var $loading = angular.element(DTLoadingTemplate.html), _showLoading = function ($elem) {
865883
$loading.show();
866884
$elem.after($loading);
@@ -915,7 +933,7 @@
915933
var NGRenderer = function (options) {
916934
return {
917935
options: options,
918-
render: function ($scope, $elem) {
936+
render: function ($scope, $elem, staticHTML) {
919937
var _this = this, expression = $elem.find('tbody').html(),
920938
// Find the resources from the comment <!-- ngRepeat: item in items --> displayed by angular in the DOM
921939
// This regexp is inspired by the one used in the "ngRepeat" directive
@@ -927,6 +945,9 @@
927945
parentScope.$watchCollection(ngRepeatAttr, function () {
928946
if (oTable && alreadyRendered && !_isDTOldVersion(oTable)) {
929947
oTable.ngDestroy();
948+
// Re-compile because we lost the angular binding to the existing data
949+
$elem.html(staticHTML);
950+
$compile($elem.contents())(parentScope);
930951
}
931952
// This condition handles the case the array is empty
932953
if (firstCall) {

0 commit comments

Comments
 (0)