Почему мы используем стиль ng вместо стиля в AngularJS для форматирования CSS?

Question

Я начал работать с AngularJS последние несколько дней.

Я просто хочу знать, почему мы используем ng-style когда у нас есть style тег для стилизации наших компонентов в статических и динамических веб-страницах. Я надеюсь, что я получу решение для того, что мы используем ng-style в частности для стайлинга в AngularJS.

Answer 1

Разница между style а также ng-styleявляется то, что стиль нгсвязывает выражение.

Это означает, что выражение будет оцениваться как угловой код. Например:

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 в вашем контроллере и привязать его содержимое к стилю.

Answer 2

По определению:

• style является атрибутом HTML.
• ng-style является директивой AngularJS

Объяснение:

Разница в том, что style, позволяет вам установить стиль элемента непосредственно через атрибут, который является родным для элемента, но если вы хотите, например, сделать что-то более динамичное, например, изменить стиль при определенном условии. Вам нужно будет использовать JavaScript для этого. В контексте AngularJS, это где ng-style приходит в.

ng-style позволит вам изменить или установить стиль элемента, используя Angular JavaScript, в зависимости от того, что вам нужно в любое конкретное время.

Пример:

Вот скрипка, демонстрирующая использование обоих (или см. Ниже)

В вашей разметке.

<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. Конечно, это может быть динамичным или гибким в соответствии с тем, что вам нужно сделать. (например, изменение цвета при нажатии кнопки, при наведении курсора и т. д.)

Answer 3

Согласно ответу @Mistalis ng-style связывает выражение.

Например. Если мы хотим динамически установить ширину или высоту, в таком месте мы можем выбрать ng-style,

В чем разница между ng-классом и ng-стилем?

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>