Angular CSS: ng-Stil für die eine Hälfte, nicht andere

Question

Ich habe eine Angular-Anwendung, die einen geteilten Bildschirm mit zwei Hälften haben soll, beide mit den gleichen Array-Werte. Die Werte für width und height werden in einem Service festgelegt und von einem Controller aufgerufen. Der Style wird im DOM mit ng-style eingestellt. Die linke Hälfte ist jedoch nicht richtig beabstandet und die rechte Hälfte ist. Ich habe ein Bild von dem Problem hier:

Hier ist der relevante 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> 

Und hier ist alle relevanten Winkel Code. Ich denke, das Problem liegt in der Steuerung, aber ich habe den Service und die Direktive mit einbezogen.

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; 
    }; 
}); 

Answer 1

ich es vereinfacht und sie alle in der Richtlinie setzen:

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" 
     }; 
    } 
};