I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. However, I am facing an issue where the left half is not properly spaced out while the right half appears fine. An image illustrating the problem can be found here:
https://i.sstatic.net/yubly.jpg
Below is the relevant code snippet:
riderSettingsHalf.html
<div ng-controller="RiderSettingsHalf">
<table>
<tbody>
<tr class="rider-settings-half-bar" ng-repeat="item in items" ng-style="{ 'width': wdt, 'height': hgt }"><td>{{item}}</td></tr>
</tbody>
</table>
</div>
Additionally, here is the Angular code related to this issue. While I suspect the controller might be causing the problem, I have included the service and directive as well.
angular.module('app').controller('RiderSettingsHalf', ['$scope', 'BarSize', function($scope, BarSize){
var BS = BarSize.getBar();
$scope.wdt = BS.wdt;
$scope.hgt = BS.hgt;
var items = {
trip1: "TRIP 1",
trip2: "TRIP 2",
rideData: "RIDE DATA",
status: "VEHICLE STATUS",
info: "VEHICLE INFO",
audio: "AUDIO",
bluetooth: "BLUETOOTH",
image: "CUSTOM IMAGE"
};
$scope.items = items;
}]);
angular.module('app').directive('riderSettingsScreen', ['BarSize', function(BarSize){
return {
templateUrl: 'public/templates/riderSettingsHalf.html',
link: function(scope, elem, attrs){
var settingBarHeight = elem[0].parentNode.offsetHeight / 5;
var settingBarWidth = elem[0].parentNode.offsetWidth;
BarSize.setBar(settingBarHeight, settingBarWidth);
}
};
}]);
angular.module('app').service('BarSize', function(){
var val = {};
this.setBar = function(h, w){
val = {hgt: h, wdt: w};
console.log(val);
};
this.getBar = function(){
return val;
};
});