角度指令仍在其他视图中初始化

Question

我有一个角度指令，我将其用作属性。我正在搞乱，并将样式应用于特定视图。问题是，当我更改路线时，仍然会应用样式。我有一个警报div，它出现在每个视图上，初始化时应用的样式被带到其他视图上。观察者也会在后续视图中保持初始化状态，并在调整窗口大小时抛出错误。这是我的指示：

.directive('fixedHeader', function ($log, Screensize, $timeout, $window, navigationService) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        scope.width = document.documentElement.clientWidth;

        if (Screensize.current === 'desktop' && !Screensize.ipad) {

            // On resize, dynamically assign th widths based on td widths
            scope.resizeElements = function () {

                // DOM Selectors and initial element widths
                var alerts = document.querySelector('.ManageOrders .alerts');
                var th = element[0].querySelector('tbody tr:first-child').querySelectorAll('th');
                var thWidth = element[0].querySelector('tbody tr:first-child');
                var tdw = element[0].querySelector('tbody tr:last-child').querySelectorAll('td');
                var tdWidth = element[0].querySelector('tbody tr:last-child').offsetWidth;
                var headerHeight = document.querySelector('.orders-toolbar').offsetHeight + document.querySelector('.title-bar').offsetHeight;
                var header = element[0].querySelector('tbody tr:first-child');
                var tablePadding = element[0].querySelector('.tablePadding');
                var pagination = document.querySelector('.paginationWrapper');
                var filters = document.querySelector('.orders-toolbar');

                // Fixed filter box styling
                filters.style.position = 'fixed';
                filters.style.top = '6.1em';
                filters.style.borderTop = '1em solid #F2F2F2';
                filters.style.width =  tdWidth + 1 + 'px';

                // Alert styling
                $timeout(function() {
                    alerts.style.marginTop = headerHeight + pagination.offsetHeight + header.offsetHeight - 2 + 'px';
                    alerts.style.width = tdWidth + 'px';
                    alerts.style.marginLeft = 'auto';
                    alerts.style.marginRight = 'auto';
                });

                // Remove main content padding to accomodate alerts
                document.querySelector('.ManageOrders .main-content').style.paddingTop = 0;

                // Add padding to display first result beneath fixed header
                // tablePadding.style.height = document.querySelector('.orders-toolbar').offsetHeight + document.querySelector('.paginationWrapper').offsetHeight + header.offsetHeight - 13 + 'px';

                // Fixed Pagination styling
                pagination.style.position = 'fixed';
                pagination.style.top = (headerHeight - 1 + 'px');
                pagination.style.width = tdWidth + 1 + 'px';
                pagination.style.backgroundColor = '#F2F2F2';
                pagination.style.zIndex = '500';

                // Fixed Header styling
                header.style.position = 'fixed';
                header.style.top = (headerHeight + pagination.offsetHeight - 2 + 'px');
                header.style.zIndex = '500';
                thWidth.style.width = tdWidth + 'px';

                // Assign appropriate widths to th elements
                for (var i=0;i<th.length;i++) {
                    if (tdw[i]!==undefined) {
                        th[i].style.maxWidth = tdw[i].offsetWidth + 'px';
                        th[i].style.width = tdw[i].offsetWidth + 'px';
                    }
                }
            }

            // Watch for new order load... If no results, re-draw table when there are results (fixed rendering error)
            scope.$watch('model.pageOrderList', function(newV, oldV) {
                if (newV.length>=1 && newV.length!==oldV.length) {
                    scope.resizeElements();
                }
            });

            // Listen for window resize
            angular.element($window).bind('resize', function () {
                scope.resizeElements();
                scope.width = document.documentElement.clientWidth;
                // Listen for window resize, delay trigger... Fixed issue with element widths not rendering properly in certain situations (e.g. opening and closing console)
                $timeout(function() {
                    scope.resizeElements();
                },100);
            });

            // Initial table render... Two $timeouts to load properly in IE
            $timeout(function() {
                $timeout(function() {
                    $(window).trigger('resize');
                    scope.resizeElements();
                });
            });
        }
      }
    }