使用 ng-style 在 css 中动态转换
Posted
技术标签:
【中文标题】使用 ng-style 在 css 中动态转换【英文标题】：Dynamically transform in css using ng-style 【发布时间】：2014-04-01 06:04:06 【问题描述】：当 transform 位于 ng-style 内部时，我无法让 transform 工作。
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div style="transform: rotate(3deg);-webkit-transform: rotate(3deg);-ms-transform: rotate(3deg)">Test</div>
<div ng-style=""transform": "rotate(numberdeg)", "-webkit-transform": "rotate(numberdeg)", "-ms-transform": "rotate(numberdeg)"">number</div>
<input type="number" ng-model="number" value=1>
</body>
</html>
链接：http://plnkr.co/edit/txSzAKxLDq48LVitntro?p=preview
如果我更改 input 数字，顶部 div 应该同时更改和 spin。当它的值为 3 时，它应该看起来像上面的单词 Test。
那么在这种情况下如何让transform 工作呢？
谢谢。
【问题讨论】：
你需要在 HTML 属性中转义那些引号 这样可以吗：plnkr.co/edit/93zsv34W8ccrL0cArUXl?p=preview ? 【参考方案1】：您不能在属性内的 JS 字符串内使用大括号绑定。您可以将变量附加到字符串上：
<div ng-style="'transform': 'rotate('+number+'deg)', '-webkit-transform': 'rotate('+number+'deg)', '-ms-transform': 'rotate('+number+'deg)'">number</div>
另外，我用单引号替换了你的双引号。
但是，您可以考虑向控制器添加一个函数以返回适当的样式：
控制器：
// Create a variable to store the transform value
$scope.transform = "rotate(0deg)";
// When the number changes, update the transform string
$scope.$watch("number", function(val)
$scope.transform = "rotate("+val+"deg)";
);
HTML：
<!-- We can now use the same value for all vendor prefixes -->
<div ng-style="'transform': transform, '-webkit-transform': transform, '-ms-transform': transform ">number</div>
Updated Plunker
【讨论】：
太棒了！谢谢。这正是我正在寻找的东西:) 您可以在scope 的 json 对象中添加所有 css 规则，这样可读性会更好。从文档中查看这个 plunker：plnkr.co/edit/y8CeZq?p=preview
@bertrandg 但是，您实际上不能在 Angular 中使用 CSS 供应商前缀来做到这一点。它们被规范化以删除 -webkit- 和 -ms- 前缀。 See this example
确切，有趣的是我不知道这种行为。
我会创建一个函数返回具有样式规则的对象，以保持 html 更清洁。以上是关于使用 ng-style 在 css 中动态转换的主要内容，如果未能解决你的问题，请参考以下文章
我可以在 Angular ng-style 指令中使用来自 API 调用的数据吗？
AngularJS如何在使用ng-style时启用彩色打印css？
Angular CSS：ng-style 为一半工作，而不是其他