2

我遇到了 angularjs 的问题，即使经过研究，我也找不到我错的地方。

我需要重新计算元素的 css 值“left”。我正在使用“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()}}

我希望你能给 mit 一个打击，谢谢你的时间！

4

3 回答 3

5

我遇到了类似的问题。我试图使用 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>
于 2014-03-31T01:56:17.743 回答
1

谢谢你的时间！我用 Cherniv 的输入解决了这个问题，但我不确定如何。我改变了创造价值观的方式。现在它正在工作。

$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();
   }
 };
于 2013-09-30T13:05:42.020 回答
1

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

在https://docs.angularjs.org/guide/interpolation阅读有关 ng-attr 插值的更多信息

于 2016-04-12T19:50:42.063 回答