Угловая замена модели не отражается на CSS встроенный стиль

Question

Вот интерактивный div. Как только он щелкнет, он должен изменить свою позицию (определенную встроенным правилом CSS). Функция обратного вызова успешно активирована.

Проблема: изменение модели не влияет на встроенный CSS. Хотя начальные значения хорошо работают.

Вид:

<div data-ng-repeat="item in items" 
    data-ng-click="item.clicked()" 
    data-ng-style="{'left': '{{item.left}}', 'width': '{{item.width}}', 'top': '0' }"> 
</div> 

Контроллер:

var item = { 
    left: '30%', 
    width: '20%' 
}; 

(function(item) { // because inside a loop 
    item.clicked = function() { 
     console.log("item clicked"); 
     item.width = '100%'; 
     item.left = '0%'; 
    }; 
})(item); 

$scope.items.push(item); 

Угловые 1,4

Answer 1

Вы просто не нужны дополнительные {{

data-ng-style="{'left': item.left, 'width': item.width, 'top': '0' }" 

Answer 2

Как сказано в документации нг стиле

Известные проблемы: Нельзя использовать значение interpolation в значении атрибута style при использовании директивы ngStyle для того же элемента. См. here для получения дополнительной информации.

Пример использования

<input type="button" value="set color" ng-click="myStyle={color:'red'}"> 
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}"> 
<input type="button" value="clear" ng-click="myStyle={}"> 
<br/> 
<span ng-style="myStyle">Sample Text</span> 
<pre>myStyle={{myStyle}}</pre>