I've got a problem with angularjs and even after research I just couldn't find where I'm wrong.

I need to recalculate the css value "left" for an element. I'm using the 'ng-style' directive and a method that will return an object with the css value. Thats - afaik - what I have to do. But when I update the value, it wont update the style.

ng-bind usage:

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

method to create object

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

method to change the object

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

It will update at another place in the content when I use it like that:

{{getCssShiftObject()}}

I hope you can give mit a hit, thanks for your time!

I've got a problem with angularjs and even after research I just couldn't find where I'm wrong.

I need to recalculate the css value "left" for an element. I'm using the 'ng-style' directive and a method that will return an object with the css value. Thats - afaik - what I have to do. But when I update the value, it wont update the style.

ng-bind usage:

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

method to create object

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

method to change the object

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

It will update at another place in the content when I use it like that:

{{getCssShiftObject()}}

I hope you can give mit a hit, thanks for your time!

• javascript
• angularjs

• 1 who and when calls $scope.nextPosition ? – Ivan Chernykh Commented Sep 30, 2013 at 11:47
• can you add fiddle or plunker? – Maxim Shoustin Commented Sep 30, 2013 at 11:49
• It's called by an ng-click directive – Tim Takel Commented Sep 30, 2013 at 11:50
• 1 i don't see any problem: jsfiddle/VeFfJ/4 – Ivan Chernykh Commented Sep 30, 2013 at 12:02

3 Answers 3

I came across a similar problem. I was trying to use ngStyle to load a background image, but if the variable in an expression is not immediately available (which might be the case if it's part of a resource promise), it won't work.

To address this, I created my own ngStyle directive that addresses this issue. Hopefully this is better than creating functions for every single scenario where you want to use ngStyle in this way.

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 piling
            attrs.$observe('style', function (){
                attr = el.getAttribute('style');

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

Then, you can use it this way:

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

Thx for your time! I solved the Problem with the input from Cherniv, but I'm not sure how. I changed the way I create the values. Now it's working.

$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();
   }
 };

I had a similar problem with the style attribute. My binding was not working in some browsers, especially IE. I solved it by using ng-attr-style="{{yourBindingExpression}}".

Read more about ng-attr interpolation at https://docs.angularjs/guide/interpolation