Как изменить стиль при изменении с AngularJS?

Question

Сначала я инициализирую переменную с 0px:

<span ng-init="topStyle='0px';">

Тогда у меня есть блок, где мне нужен этот стиль:

<span ng-style="{top: '{{topStyle}}'}">

Но когда я изменяю это значение на что-то другое, стиль не меняется вообще. Вот что показывает мой браузер:

<span ng-style="{top: '-50px'}" style="top: 0px;"></span>

Answer 1

Размещенный вами код не работает должным образом, потому что когда приходит обновление, директивы не могут понять, что значение изменилось, и поэтому не обновляют атрибут stlye.

Причина в том, что ngStyle директива просто принимает переменные внутри нее, такие как:

ng-style="topStyle"

С topStyle как:

{top:'0px'}

А потом обновлять все это каждый раз.

Это пример (щелкнув по "click me", обновляет ngStyle): http://jsfiddle.net/tdegtLb4/2/

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

Это тот же пример, что и приведенный выше style:

http://jsfiddle.net/tdegtLb4/1/

Answer 2

Пытаться:

<span ng-style="{top: topStyle}">.