修改ng-class from指令

Question

我正在尝试编写一个指令来监视元素的宽度，并有条件地设置一个ng-class变量。我不太确定我是不是在用正确的方式去做这件事，希望能得到一些帮助！我的html

    <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-class变量。其次，我如何“观察”元素宽度的变化？通常我可以只使用窗口大小调整函数，但是元素的大小在其他情况下也会改变，比如侧面板打开。我真的应该这么做吗？或者最好是从另一个控制面板的指令/控制器/服务中触发这个指令？

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