Почему мой встроенный JS нарушает мой размер div?

Question

Почему мой встроенный JS нарушает мой размер div?

0

Когда я рисую div и устанавливаю фоновый цвет, он отлично работает.

<div style="border:1px solid #f00; background-color:#00f;width:{{...

Когда я пытаюсь сделать цвет динамическим встроенным значением JS (я использую фиксированное значение inline для простоты здесь), тогда весь div сворачивается в 2 пиксела high & wide.

<div style="border:1px solid #f00; background-color:#{{ "00f"}};width:{{...

test:#{{ "00f" }}

test:#00f отображается правильно после этого. Почему мой коллапс? Я использую динамические значения для ширины, и мне это нравится

Amit Sirohiya 22 март 2016, в 04:00

Источник

0

Вау, это сбивает с толку ... Почему вы используете {{}} в стиле? Можете ли вы показать нам весь свой код?
amanuel2 22 март 2016, в 02:10

Теги:

javascript

angularjs

css

3 ответа

Ещё вопросы

Вау, это сбивает с толку ... Почему вы используете {{}} в стиле? Можете ли вы показать нам весь свой код?

user1743310 · Answer 1 · 2016-03-22T07-17-00.000Z

Ответ был довольно простым, двойная кавычка "в тегах {{...}} должна быть одиночной цитатой" по-видимому ", по крайней мере, она работает, если строка окружена одинарными кавычками. Она полностью разбивает элемент стиля, который почему div сжимался до нулевого размера.

<div style="border:1px solid #f00; background-color:#{{ '00f'}};width:{{...

работает правильно. ценят предложения об использовании модели правильно - но это несколько философски для этого вопроса, который был именно тем, почему Div ломался с использованием inline.

Amit Sirohiya · Answer 2 · 2016-03-22T05-31-00.000Z

Директива ngClass позволяет динамически устанавливать классы CSS в HTML-элемент путем привязки выражения, которое представляет все классы, которые необходимо добавить.

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!</div>

krishna · Answer 3 · 2016-03-22T04-33-00.000Z

Лучший способ получить динамические стили с angularJS будет с ng-классом, как упоминал Амит в первом ответе. Однако всегда лучше обращаться с ng-классом на основе значений угловой переменной, как показано ниже:

<div ng-class="{ '00f-background': awesome, 'normal-background': simple }

В этом случае класс 00f-background устанавливается, если awesome является true, а normal-background устанавливается, если simple is true.