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

Posted 2023-03-06

【中文标题】Angular CSS：ng-style 为一半工作，而不是其他

【英文标题】：Angular CSS: ng-style working for one half, not other

【发布时间】：2016-10-09 13:18:03

【问题描述】：

我有一个 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;
    ;
);

【问题讨论】：

为什么要用BarSize 服务让事情变得过于复杂。只需计算指令中的维度并在指令范围内分配值。您也可以将控制器分配为指令的controller

我应该这样做！我会告诉你它是否有效。

菲尔谢谢你。

【参考方案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"
        ;   
    
;

【讨论】：

settingBarHeight 的值在两次调用中是否相同？我的预感是第一次调用可能会影响 parentNode 的高度。我仍然不知道你为什么需要这个复杂的解决方案，如果想法是均匀分布高度......使用弹性框而不是表格。