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