Angular CSS：ng風格工作的一半，而不是其他

Question

我有一個Angular應用程序，應該有一個分割屏幕與兩半，他們都具有相同的數組值。寬度和高度值在服務中設置並由控制器調用。該樣式在DOM上以ng樣式設置。但是，左半部分沒有正確分開，右半部分是。我這裏有問題的圖像：

下面是相關代碼：

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> 

這裏是所有相關的角碼。我認爲問題在於控制器，但我也包含了服務和指令。

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

我簡化它，並把它所有的指令：

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