Question

我正在尝试使用ng-style作为div。我尝试了各种各样的东西，并在谷歌和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>

在debuger中看起来像这样：

 <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

你不能使用双括号：

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

Answer 2

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

如果您更容易使用camelCase，并且如果您要插入变量，请确保引用它们。但是，您可能不希望插值，但需要绑定，因此通过更改范围变量，样式也会更改：

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

请在此处查看：

＆＃13;

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';
    }
  })

＆＃13;

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

＆＃13;

<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>

＆＃13;

AngularJS Ng风格

2 个答案: