AngularJS Ng风格

Question

我正试着用ng风格来做div。我尝试过各种各样的东西，并在Google和Stackoverflow上查看过，但我无法让它开始工作。只显示testInsideDiv文本。我检查我是否错过了任何'，但我没有看到它，我尝试了很多不同的东西。有人看到问题所在了吗？

以下是代码：

<div ng-style="{'width' : {{deviceWidth}}, 'height' : {{deviceHeight}}, 'background-image':{{imagePath}}, 'background-size' : {{deviceWidth}} {{deviceHeight}}, 'background-repeat':'no-repeat'" ng-click="addOnClick($event)">testInsideDiv
                </div>

在调试器里看起来是这样的：

 <div ng-style="{'width' : 569px, 'height' : 300px,
 'background-image':'url('http://scada.voco.si/Portals/0/Scadas/2/28/28.jpg')',
 'background-size' : 569px 300px}, 'background-repeat':'no-repeat'"
 ng-click="addOnClick($event)"
 class="disable-user-behavior">testInsideDiv
                 </div>

Answer 1

主要错误-您忘记了ng样式对象的大括号。

如果对您来说更容易使用camelCase，那么如果您是在插值变量，请确保引用它们。但是，您可能不需要插值，而是需要绑定，因此通过更改作用域变量，样式也会发生变化：

<div ng-style="{
    width : deviceWidth, 
    height : deviceHeight, 
    backgroundImage: imagePath, 
    backgroundSize: deviceWidth + ' ' + deviceHeight, 
    backgroundRepeat: 'no-repeat'
    }" ng-click="addOnClick($event)">testInsideDiv</div>

在这里看到它的作用：

​

angular.module('app', [])
  .controller('Ctrl', function($scope) {
    $scope.deviceWidth = '460px';
    $scope.deviceHeight = '276px';
    $scope.imagePath = 'url(http://cdn2.business2community.com/wp-content/uploads/2014/12/Super-Mario-no-longer-the-007.jpg)';
  
    // changing scope properties will make the style change
    // because the values are not interpolated
    // as in your original code
    $scope.shrink = function() {
      $scope.deviceWidth = '230px';
      $scope.deviceHeight = '138px';
    }
  })

div {
  border: 1px solid black;
  transition: all .5s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl" ng-style="{
    width : deviceWidth, 
    height : deviceHeight, 
    backgroundImage: imagePath, 
    backgroundSize: deviceWidth + ' ' + deviceHeight, 
    backgroundRepeat: 'no-repeat'
    }" ng-click="shrink()">testInsideDiv Click to shrink</div>

​

Answer 2

您不能使用双大括号：

<div ng-style="{'width': deviceWidth, 'height': deviceHeight}">...</div>