4

我正在尝试赋予我的 div 动态样式 - 我希望 css 来自控制器，其中控制器返回的 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 等）在那里（它们显示在控制台日志中），并且我知道控制器正在运行它的代码，因为 div 的背景变为绿色。但是，顶部位置部分不起作用。ng-style 不能使用带有可变字段的对象吗？此外，这是否需要在自定义指令中代替？

4

3 回答 3

4

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

它应该是ng-style="setTopPosition

在控制器中，例如：

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

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

于 2013-09-12T11:29:24.297 回答
4

万一其他人像我一样遇到这个问题，我的问题是在从 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>
于 2015-01-03T22:47:56.600 回答
3

除非您将 jQuery 与 angular 一起使用，否则您必须提供px值的一部分。jQlite不支持像 jQuery 这样的高级 CSS 东西，所以你应该这样做。

top : $scope.topPosition + 'px'

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

于 2013-09-12T11:31:59.980 回答