从指令修改 ng 类

Question

我正在尝试编写一个监视元素宽度的指令，并有条件地设置一个ng类变量。不太确定我是否以正确的方式做到这一点，并希望得到一些帮助！我的网页

    <div ng-class="{'compact' : compact}" calc-width>stuff here</div>

我的指令（到目前为止）

    app.directive('calcWidth', function() {
        return {
            restrict: 'A',
            link: function(scope, elem, attrs) { 
                var width = elem[0].clientWidth;
                scope.compact = false;
                if (width < 600) {
                    scope.compact = true;
                }
            },
        };
    });

首先，这不是按预期修改 ng 类变量。其次，如何"观察"元素宽度的变化？通常我可以只使用窗口调整大小功能，但在其他情况下元素的大小也会发生变化，例如侧面板打开。我甚至应该这样做吗？还是最好以某种方式从控制面板的另一个指令/控制器/服务触发此指令？

Answer 1

您需要将

链接函数的内容包装在$watch函数中。

link: function(scope, elem, attrs) { 
    scope.$watch(function () { // this function will be executed for each digest cycle.
        var width = elem[0].clientWidth;
        scope.compact = false;
        if (width < 600) {
            scope.compact = true;
        }
    })
}