Question

我对angularjs有疑问，即使经过研究，我也找不到我错的地方。

我需要重新计算元素的“左”的css值。我正在使用'ng-style'指令和一个返回带有css值的对象的方法。多数民众赞成 - afaik - 我必须做的事情。但是当我更新值时，它不会更新样式。

ng-bind用法：

<div ng-style="getCssShiftObject()">

创建对象的方法

$scope.getCssShiftObject =function(){
   return {'left':this.cssShift+'px'};
};

更改对象的方法

 $scope.nextPosition = function(){
     if((this.currentPosition+1) <= this.maxPosition){
        this.currentPosition = this.currentPosition+1;
        this.cssShift = (this.currentPosition*this.slideSize)*-1;
    }
    return this.currentPosition;
 };

当我使用它时，它会在内容的其他位置更新：

{{getCssShiftObject()}}

我希望你能给予一击，感谢你的时间！

Answer 1

我遇到了类似的问题。我试图使用ngStyle加载背景图像，但是如果表达式中的变量不能立即可用（如果它是资源承诺的一部分可能就是这种情况），那么它就不会起作用。

为了解决这个问题，我创建了自己的ngStyle指令来解决这个问题。希望这比为每个想要以这种方式使用ngStyle的场景创建函数更好。

app.directive("myStyle", function (){
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
            var el   = element[0],
                attr = el.getAttribute('style');

            el.setAttribute('style', attr);

            // We need to watch for changes in the style in case required data is not yet ready when compiling
            attrs.$observe('style', function (){
                attr = el.getAttribute('style');

                if(attr)
                {
                    el.setAttribute('style', attr);
                }
            });
        }
    };
});

然后，您可以这样使用它：

<a my-style style="background-image: url('{{promise.myImage}}')"></a>

Answer 2

你的时间！我用切尔尼夫的输入解决了问题，但我不确定如何。我改变了创建值的方式。现在它正在发挥作用。

$scope.calcCssShift = function(){
  this.cssShift = ($scope.currentPosition * $scope.slideSize)*-1;
};

$scope.getCssShiftObject =function(){
   return {'left':$scope.cssShift+'px'};
};

$scope.nextPosition = function(){
   if((this.currentPosition+1) <= this.maxPosition){
      $scope.currentPosition = this.currentPosition+1;
      $scope.calcCssShift();
   }
 };

Answer 3

我的style属性有类似的问题。我的绑定在某些浏览器中不起作用，尤其是IE。我使用 ng-attr-style =“{{yourBindingExpression}}”解决了这个问题。

在https://docs.angularjs.org/guide/interpolation

了解有关ng-attr插值的更多信息

Angular.js ng-style不会绑定值

3 个答案: