Javascript 动态更新CSS

我的HTML设置如下

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

尽管我可以看到控制台上生成了正确的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%）用于所有宽度值。

这两个解决方案可能会有所帮助

不要将

setWidthOfTime

设置为作用域的属性，而是尝试将其设置为作用域的对象的属性。假设我们将此对象称为

foo

，则首先在控制器中使用名为

setWidthOfTime

的属性初始化

foo

。从这一点开始，您将从

foo.setWidthOfTime

读取或写入，无论是在控制器还是视图中。这里的键在初始化后永远不会覆盖

foo

。（我建议你自己熟悉一下）

---

使用ngController的新语法，如propertyName（仅在AngularJS的较新版本中可用）。你可能会有类似于

ng controller=“MyController as myctrl”

的东西，然后是

ng style=“myctrl.setWidthOfTime

。这种新语法是我的新朋友，我自己也没有使用过，但我已经读过，并看到了它的有用性。如果AngularJS版本中有，请尝试一下。（）

假设

机器

是您从

ngRepeat

指令中获得的，请尝试以下操作：

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

---

只是测试了一些理论，两种方法都没有影响。你能试着用小提琴重现问题吗？这里看不到问题。看起来与作用域继承有关。

ngRepeat

为每个条目创建新的作用域。对于每个条目作用域，都会创建一个属性

setWidthOfTime

。但是，你的控制器，似乎是在由

ngRepeat

创建的所有条目作用域的父作用域中设置

setWidthOfTime

属性。只是为了调查，如果取出

ngRepeat

，它是否有效？不，似乎没有帮助，ng repeat也嵌套在这里。结构太复杂，我无法在小提琴中复制：（@tamakisquare编辑了这个问题，问题解决了一半。

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