angularjs - Angular ngStyle 变量样式

Question

我试图给我的 div 动态样式 - 我希望 css 来自 Controller ， Controller 返回的 css 对象不是硬编码的，而是动态变化的(我需要一个“顶部”字段，它是一个变量)。我正在使用 ng-style 来尝试实现这一点:

-html- 
<div id="preview" ng-style="setTopPosition()">

 -controller- 
    $scope.setTopPosition = function() {
    console.log("top position: "  +  $scope.topPosition);
   var retObj =  { top : $scope.topPosition , background: "green" };
    console.log(retObj);
    return retObj
};

现在我知道我期望的值($scope.topPosition 等)在那里(它们显示在控制台日志中)，并且我知道 Controller 正在运行它的代码，因为 div 的背景变成了绿色。但是，顶部位置部分不起作用。不能 ng-style 使用带有可变字段的对象吗？此外，这是否需要在自定义指令中？

Answer 1

从 ng-style="setTopPosition() 中删除大括号如果您想将其用作变量。

应该是 ng-style="setTopPosition
在 Controller 中，例如:

 $scope.setTopPosition= {
            top : $scope.topPosition+'px',
            background : "green",
            "width": 0 + '%',
            "height": 5 + 'px'
        };

在任何更改中，您只需将新值设置为 $scope.setTopPosition= {/* ... */}