Angular.js ng-style не будет связывать значение

Question

У меня проблема с angularjs, и даже после исследования я просто не мог найти, где я ошибаюсь.

Мне нужно пересчитать значение css «left» для элемента. Я использую директиву «ng-style» и метод, который возвращает объект с значением css. Thats - afaik - что я должен делать. Но когда я обновляю значение, он не будет обновлять стиль.

Использование нг-связывания:

<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

Thx для вашего времени! Я решил проблему с помощью Черновца, но я не знаю, как это сделать. Я изменил способ создания значений. Теперь он работает.

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

Я столкнулся с подобной проблемой. Я пытался использовать 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 3

У меня была аналогичная проблема с атрибутом стиля. Моя привязка не работала в некоторых браузерах, особенно в IE. Я решил это, используя ng-attr-style = "{{yourBindingExpression}}".

Подробнее о нг-атр интерполяции в https://docs.angularjs.org/guide/interpolation