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