Angular CSS: ng-style 工作一半，而不是其他

Question

我有一个 Angular 应用程序，它应该有一个分为两半的分屏，它们都具有相同的数组值。宽度和高度值在服务中设置并由控制器调用。在 DOM 上使用 ng-style 设置样式。但是，左半部分没有正确间隔，而右半部分是。我在这里有问题的图片：

相关代码如下：

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 代码。我认为问题出在控制器上，但我也包含了服务和指令。

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

Angular CSS: ng-style 工作一半，而不是其他

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

html

javascript

css

angularjs

ng-style