angularjs – Angular ngStyle变量样式

发布时间：2020-12-17 17:52:50 所属栏目：安全来源：网络整理

导读：我试图给出我的div动态样式 – 我希望css来自控制器,控制器返回的css对象不是硬编码的,而是动态变化的(我需要一个’top’字段,它是一个变量).我正在使用ng-style来尝试实现此目的： -html- div id="preview" ng-style="setTopPosition()" -controller- $scop

我试图给出我的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不能使用具有可变字段的对象吗？此外,这需要在自定义指令中吗？

解决方法

如果其他人像我一样遇到这个问题,那么从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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!