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变量。其次，我该如何观看＆＃39;对于元素宽度的变化？通常我可以使用窗口调整大小功能，但元素的大小也会在其他情况下（例如侧面板打开）发生变化。我应该这样做吗？或者最好以某种方式从控制面板的另一个指令/控制器/服务触发该指令？

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

从指令修改ng-class

1 个答案: