javascript - Angular ディレクティブの再コンパイル

Question

私はディレクティブの内容を再レンダリングしようとしています。見つけた複数の解決策を試しましたが、それらのほとんどはブラウザをフリーズさせるか、単に機能しません。これは私のディレクティブです:

angular.module('app.common.directives')
.directive('stColumns', function ($compile, $window, $timeout) {

    return {
        require: '^stTable',
        compile: function(tElement, tAttrs, transclude) {
            var displayIdx = $window.innerWidth > 1000 ? 'display' : 'displaySm';
            tElement.find('tr').each(function(idx, el) {
                $(el).find('td, th').each(function(tdIdx, td) {
                    $(td).attr('ng-if', 'stColumnsStatus[' + tdIdx + '] && stColumnsStatus[' + tdIdx + '].' + displayIdx);
                });
            });

            return {
                post: function(scope, iElem, attr) {
                    scope.stColumnsStatus = scope[attr.stColumns];
                }
            }
        }
    };
});

列定義を追加する単純なスマート テーブル プラグインです。追加したいのは、ユーザーがウィンドウのサイズを変更したときにテーブル全体を再レンダリングして、「displayIdx」変数がウィンドウに合わせて変更されるようにすることです。

私はAngularが初めてなので、それを正しく行っているかどうかもわかりません:)