更新范围时，ng-style变量不更新

我正在监视CSS样式并更新基于该CSS样式值的范围内的变量。它第一次工作，但是当浏览器调整大小时，作用域得到更新，但ng样式不会使用新的作用域参数更新。更新范围时，ng-style变量不更新

JS：

.directive('monitorStyle', function() { 
     return { 
      link: function(scope, element, attrs) { 
       scope[attrs.updateVariable] = $(element).css(attrs.monitorStyle); 
       angular.element(window).on('resize', function() { 
        scope[attrs.updateVariable] = $(element).css(attrs.monitorStyle); 
       }); 

      } 
     } 
    })

HTML：

<p class="text" monitor-style="font-size" update-variable="textHeight">Press "<img class="mini up" src="img/select-arrow.png" src="Up" ng-style="{'height': textHeight}">

我想，因为这是人推荐做这个控制器之外。为什么在范围更新时ng样式不会更新？

来源

2015-10-16 user2476265

您是否尝试过使用$（窗口）.resize而不是角？如果你想通过角度实现这一点，那么下面的链接将帮助你。 http://stackoverflow.com/questions/23044338/window-resize-directive –

也许这个答案可能会帮助你http://stackoverflow.com/a/25111105/2353403 –

谢谢，Damnien回答如下。诀窍是添加范围。$ apply（）;在指令 – user2476265

窗口事件不是一个角度事件，所以角度不知道他必须更新模型/范围。你必须添加范围$适用（）来告诉角度来刷新它。当你的模型与像$ HTTP，$超时角事件更新

angular.element(window).on('resize', function() { 
    scope[attrs.updateVariable] = $(element).css(attrs.monitorStyle); 
    scope.$apply(); 
});

数据bindig只适用，NG-单击，...

关于它的伟大的文章：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

来源

2015-10-16 09:33:19 Damien

中调整大小事件的内部注意：我正在尝试这个，但应用范围。$ apply（）;在angular.element（窗口）之外调整大小，它给我提供了$ digest进行中的错误，您可以调用范围。$ apply too early – user2476265

哟，我做了这个生病的解决方案。

所以，如果你想观看的风格（甚至是一个特定的元素在他们的阵列），然后把它们的值，你可以用这个$范围JS：

.directive('monitorStyle', function($timeout) { 
    return { 
     link: function(scope, element, attrs) { 
      function addToScope() { 
       var updateVariable = attrs.updateVariable.split(','); 
       var monitorStyle = attrs.monitorStyle.split(','); 
       for (var i = 0; i < updateVariable.length; i++) { 
        scope[updateVariable[i]] = $(element).css(monitorStyle[i]); 
       } 
      } 
      addToScope(); 
      angular.element(window).on('resize', function() { 
       addToScope(); 
       scope.$apply(); 
      }); 
     } 
    } 
})

，并将其应用是这样的：

<h2 monitor-style="font-size,line-height" update-variable="headerHeight,headerLineHeight">

这将更新$范围初始化和窗口大小调整。你当然可以修改它以达到你自己的目的。

每次$范围变化，你可以更新其他的风格是这样的：

<div ng-style="{'height': headerHeight, 'line-height': headerLineHeight}">

来源

2015-10-16 15:17:05 user2476265

更新范围时，ng-style变量不更新

回答

相关问题