Question

我的HTML设置如下

<div.... repeats in a loop... >
     ....
    <div ng-init="setWidthOfTimeLine(machine)" style="height:2px;" class="background-grey" >
        <div ng-style="setWidthOfTime"></div> 
    </div>
</div>

在我的控制器中我有类似的东西：

$scope.setWidthOfTimeLine = function(machine){

            var length = (machine.machineStatus).length - 1;
            var widthGreen = (length/8) *100;

                $scope.setWidthOfTime = {
                    background : "green",
                    width : widthGreen + '%',
                    height : '2px'
                }
                console.log($scope.setWidthOfTime);
        }

虽然我可以在控制台上看到正确生成的CSS。它没有被应用于DOM，任何想法我缺少什么？

控制台：

Object {background: "green", width: "12.5%"} 
Object {background: "green", width: "25%"} 
Object {background: "green", width: "25%"} 
Object {background: "green", width: "37.5%"}

编辑：通过在setWidthOfTime变量中设置高度来修复问题的一半，但现在它为所有宽度值取最后一个值（37.5％）。

Answer 1

两种可能对此有帮助的解决方案。

不要将setWidthOfTime设置为范围属性，而是尝试将其设置为范围对象的属性。假设我们调用此对象foo，那么您首先要使用控制器中名为foo的属性初始化setWidthOfTime。从这一点开始，无论是在控制器还是视图中，您都可以读取或写入foo.setWidthOfTime。这里的关键是在初始化后永远不会覆盖foo。（我建议您熟悉How scope inheritance works）

使用ngController的新语法作为propertyName （仅在较新版本的AngularJS中可用）。您会有ng-controller="MyController as myctrl"然后ng-style="myctrl.setWidthOfTime之类的内容。这个新语法是一个新的熟人，我自己没有使用它，但我已经阅读了它并看到它的用处。如果它在AngularJS版本中可用，请试一试。（Reference）

Answer 2

假设machine是您从ngRepeat指令获得的，请尝试以下操作：

<div.... ng-repeat="machine in $scope.machines"... >
     ....
    <div style="height:2px;" class="background-grey" >
        <div ng-style="setWidthOfTimeLine(machine)"></div> 
    </div>
</div>

控制器：

$scope.setWidthOfTimeLine = function(machine){
    var length = (machine.machineStatus).length - 1;
    var widthGreen = (length/8) *100;
    var widthOfTime = {
        background : "green",
        width : widthGreen + '%',
        height : '2px'
    }
    console.log(widthOfTime);
    return widthOfTime;
}

动态更新CSS

2 个答案: