Angular CSS: ng-style working for one half, not other

Question

I have an Angular application which is supposed to have a split screen with two halves, both of them with the same array values. The width and height values are set in a service and called by a controller. The style is set with ng-style on the DOM. However, the left half is not spaced out properly and the right half is. I have an image of the problem here:

Here is the relevant code:

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>

And here is all the relevant Angular code. I think the problem lies in the controller, but I've 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;
    };
});

Why overcomplicate things with that `BarSize` service. Simply calculate the dimensions in your directive and assign the values in the directive scope. You might as well assign the controller as the directive's `controller` too — Phil, Jun 09 '16 at 04:34

Les Paul · Accepted Answer · 2016-06-09T16:58:34.557

1

I simplified it and put it all in the directive:

return {
    restrict: 'EA',
    templateUrl: 'public/templates/riderSettingsHalf.html',
    link: function(scope, elem, attrs){
        scope.wdt = elem[0].parentNode.offsetWidth;
        scope.hgt = elem[0].parentNode.offsetHeight / 5;
        scope.items = {
            trip1: "TRIP 1",
            trip2: "TRIP 2",
            rideData: "RIDE DATA",
            status: "VEHICLE STATUS",
            info: "VEHICLE INFO",
            audio: "AUDIO",
            bluetooth: "BLUETOOTH",
            image: "CUSTOM IMAGE"
        };   
    }
};

edited Jun 09 '16 at 16:58

answered Jun 09 '16 at 05:27

Les Paul

1,260
5
22
46

Are the values of `settingBarHeight` the same in both invocations? My hunch is that probably the first invocation is affecting the parentNode height. I still don't know why you need this complex solution, if the idea is to distribute the heights evenly... use a flexbox instead of a table. – Diego Jun 09 '16 at 05:45

Angular CSS: ng-style working for one half, not other

1 Answers1