Question

我试图给出我的div动态样式 - 我希望css来自控制器，控制器返回的css对象不是硬编码的，而是动态变化的（我需要一个'top'字段，这是一个变量）。我正在使用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等）（它们显示在控制台日志中），我知道控制器正在运行它的代码，因为div的背景变为绿色。但是，顶部位置部分不起作用。 ng-style不能使用具有可变字段的对象吗？另外，这需要在自定义指令中吗？

Answer 1

如果有其他人像我一样遇到这个问题，那么在我从Angular 1.2.x升级到Angular 1.3.x之后就出现了问题。

升级后，当我手动添加'px'时，它实际上失败了：

<span ng-style="{top: spanTop + 'px'}">I (don't) have top!</span>

当我删除'px'时，它开始工作了：

<span ng-style="{top: spanTop}">I have top!</span>

Answer 2

如果要将其用作变量，请从ng-style="setTopPosition()删除大括号。

应为ng-style="setTopPosition

在控制器中

，例如：

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

对于您只是将新值设置为$scope.setTopPosition= {/* ... */}

的任何更改

Answer 3

除非您使用带角度的jQuery，否则必须提供值的px部分。 jQlite不支持像jQuery这样的高级CSS，所以你应该这样做。

top : $scope.topPosition + 'px'

注意：我之所以这么说是因为样式在ng-style指令中正常应用，如下所示：element.css(styles);

Angular ngStyle变量样式

3 个答案: