角度模型更改未反映到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

由於NG式的文件中說

已知問題： 在同一元素上使用ngStyle指令時，不應在style屬性的值中使用interpolation。有關更多信息，請參見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>