Question

过去几天我开始使用AngularJS。

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

Answer 1

style和ng-style之间的区别在于ng-style 绑定表达式。

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

＆＃13;

span {
  color: black;
}

＆＃13;

 <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>

＆＃13;

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

Answer 2

根据定义：

style是HTML attribute。

ng-style是AngularJS directive

<强>解释

不同之处在于ng-style，允许您直接通过元素原生属性设置元素的样式，但如果您想要，则为示例做一些更有活力的事情，比如在某种条件下改变风格。您需要使用JavaScript才能这样做。在AngularJS的上下文中，<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}; }将允许您根据任何特定时间的需要使用 ~~Angular~~ JavaScript来更改或设置元素的样式。

示例：

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

在你的标记中。

getStyle

在角度控制器中。

ng-style

在上面的示例中，{{1}}是一个函数，它允许您传入一个颜色值，而{{1}}指令依次将绑定到DOM元素。当然，根据您的需要，这可以变得动态或灵活。（例如，点击按钮，悬停事件等时颜色会发生变化）

Answer 3

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: