Question

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

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-style不会更新？

Answer 1

窗口事件不是角度事件，因此angular不知道他必须更新模型/范围。你必须添加范围。$ apply（）告诉angular刷新它：

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

数据绑定仅在使用$ http，$ timeout，ng-click等角度事件更新模型时有效...

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

Answer 2

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

因此，如果您想观看样式（甚至是特定元素上的数组），然后将它们的值发送到$ scope，您可以使用此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">

这将在初始化和窗口大小调整时更新$ scope。你当然可以根据自己的目的修改它。

每次$ scope更改时，您都可以更新其他样式：

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

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

2 个答案: