为啥我们在 AngularJS 中使用 ng-style 而不是 style 进行 css 格式化？

Posted 2023-03-06

【中文标题】为啥我们在 AngularJS 中使用 ng-style 而不是 style 进行 css 格式化？

【英文标题】：Why do we use ng-style instead of style in AngularJS for css formatting?为什么我们在 AngularJS 中使用 ng-style 而不是 style 进行 css 格式化？

【发布时间】：2017-10-24 17:27:57

【问题描述】：

过去几天我开始使用 AngularJS。

我只是想知道为什么我们使用ng-style 标签来为静态和动态网页中的组件设置样式时使用style。我希望我能找到我们使用 ng-style 的解决方案，特别是在 AngularJS 中进行样式设置。

【参考方案1】：

根据@Mistalis 回答ng-style 绑定一个表达式。

例如..如果我们想动态设置宽度或高度，在这种地方我们可以选择ng-style。

What is the difference between ng-class and ng-style?

var app = angular.module('exApp', []);
app.controller('ctrl', function($scope) 
    $scope.sty = 40;
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="exApp" ng-controller="ctrl">
  <button ng-click="sty=sty+10">Click Me +</button>
  <button ng-click="sty=sty-10">Click Me -</button>
  <br/> <br/>
  <div ng-style="background:'#789',height:sty + 'px', width:sty + 'px'">See Now</div>
  <br>
  <p>Size: sty</p>
</div>

【参考方案2】：

根据定义：

style 是一个 html attribute。 ng-style 是一个 AngularJS directive

说明：

不同之处在于style，允许您直接通过元素的本机属性设置元素的样式，但如果您想，例如，做一些更动态的事情，例如在一定条件下改变风格。您需要使用 javascript 来执行此操作。在 AngularJS 的上下文中，这就是 ng-style 的用武之地。

ng-style 将允许您使用 Angular JavaScript 根据您在任何特定时间的需要更改或设置元素的样式。

示例：

这是一个fiddle 演示两者的用法（或见下文）

在您的标记中。

<div style="background: red"> this is set using the style property</div>

<div ng-style="getStyle('111111')"> set using ng-style</div> 

在您的角度控制器中。

getStyle = function(colour) 
    return "background": "#" + colour;

在上面的例子中，getStyle 是一个函数，它允许你传入一个颜色值，ng-style 指令依次将绑定到 DOM 元素。当然，这可以根据您需要做的事情变得动态或灵活。 （例如，在单击按钮、悬停事件等时改变颜色）

【参考方案3】：

style 和ng-style 的区别在于，ng-style 绑定了一个表达式。

这意味着它将表达式评估为 Angular 代码。例如：

span 
  color: black;

 <script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app="">
  <button ng-click="myStyle=color:'red'">Set color</button>
  <button ng-click="myStyle='background-color':'blue'">Set background</button>
  <br/>
  <span ng-style="myStyle">Set my style with ngStyle!</span>
  <pre>myStyle=myStyle</pre>
</div>

ng-style="myStyle" 将在您的控制器中查找$scope.myStyle，并将其内容绑定到样式。