GUI -- Table scrolling fixed header directive no longer depends on a timeout function.
- Added a general directive that emits when ng-repeat is completed.
Change-Id: I23131adecded9f0393334d003812845ac6b4f031
diff --git a/web/gui/src/main/webapp/app/directives.js b/web/gui/src/main/webapp/app/directives.js
index 29e555d..8bd31e2 100644
--- a/web/gui/src/main/webapp/app/directives.js
+++ b/web/gui/src/main/webapp/app/directives.js
@@ -70,5 +70,14 @@
}
};
+ }])
+
+ // create a general ng-repeat complete notifier directive
+ .directive('ngRepeatDone', [function () {
+ return function (scope, element, attrs) {
+ if(scope.$last) {
+ scope.$emit('LastElement');
+ }
+ }
}]);
}());
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index 062318f..5cf283e 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -113,7 +113,6 @@
};
}])
- // TODO: find another solution other than timeout for waiting for ng-repeat to end
.directive('onosFixedHeader', ['$window', '$timeout',
'MastService', 'FnService',
function (_$window_, $timeout, mast, _fs_) {
@@ -121,7 +120,8 @@
$window = _$window_;
fs = _fs_;
var w = angular.element($window),
- table = d3.select(element[0]);
+ table = d3.select(element[0]),
+ shouldResize = false;
scope.$watch(function () {
return {
@@ -136,10 +136,16 @@
scope.windowWidth = newVal.w;
scope.setTableHW = function () {
- $timeout(function () {
+ scope.$on('LastElement', function (event) {
fixTable(table, thead, tbody);
- }, 250);
+ shouldResize = true;
+ });
};
+
+ if (shouldResize) {
+ fixTable(table, thead, tbody);
+ }
+
}, true);
w.bind('onos-fixed-header', function () {
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 1ef4556..aef1228 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -18,7 +18,8 @@
</thead>
<tbody>
- <tr ng-repeat="dev in ctrl.deviceData">
+ <tr ng-repeat="dev in ctrl.deviceData"
+ ng-repeat-done>
<td><div icon icon-id="{{dev._iconid_available}}"></div></td>
<td>{{dev.id}}</td>
<td>{{dev.mfr}}</td>