AngularJS $watch 窗口在指令内调整大小

Posted 2023-03-11

【中文标题】AngularJS $watch 窗口在指令内调整大小

【英文标题】：AngularJS $watch window resize inside directive

【发布时间】：2015-10-15 20:14:00

【问题描述】：

我的模块模式如下所示：

'use strict';

angular.module('app', [])
   .directive('myDirective', ['SomeDep', function (SomeDep) 
       var linker = function (scope, element, attr) 
          // some work
       ;

       return 
          link: linker,
          restrict: 'E'
       ;
   ])
;

我遇到的麻烦是将 $watch 集成到其中。使用 '$window' 服务特别关注窗口大小调整。

[编辑]：

我一直意识到我的问题是什么...当我忘记将它作为属性实现时，我一直在限制元素... @_@;

【问题讨论】：

如果您找到了下面未提供的解决方案，请提供并接受答案，以便解决此帖子。不要在问题本身中回答问题。

【参考方案1】：

您可以收听resize 事件并在某些维度发生变化时触发

指令

(function() 
'use strict';

    angular
    .module('myApp.directives')
    .directive('resize', ['$window', function ($window) 
        return 
            link: link,
            restrict: 'A'
        ;

        function link(scope, element, attrs)
            scope.width = $window.innerWidth;
            function onResize()
                // uncomment for only fire when $window.innerWidth change   
                // if (scope.width !== $window.innerWidth)
                
                    scope.width = $window.innerWidth;
                    scope.$digest();
                
            ;

            function cleanUp() 
                angular.element($window).off('resize', onResize);
            

            angular.element($window).on('resize', onResize);
            scope.$on('$destroy', cleanUp);
        
    ]);
)();

在html中

<div class="row" resize> ,
    <div class="col-sm-2 col-xs-6" ng-repeat="v in tag.vod"> 
        <h4 ng-bind="::v.known_as"></h4>
    </div> 
</div> 

控制器：

$scope.$watch('width', function(old, newv)
     console.log(old, newv);
 )

【讨论】：

这缺少取消绑定的调用，并且很可能会创建僵尸侦听器，例如当导航到应用内的不同视图时。

【参考方案2】：

// 以下是 angular 2.0 指令，用于调整窗口大小的滚动条，根据您的标签调整给定元素

---- angular 2.0 window resize directive.
import  Directive, ElementRef from 'angular2/core';

@Directive(
       selector: '[resize]',
       host:  '(window:resize)': 'onResize()'  // Window resize listener
)

export class AutoResize 

element: ElementRef; // Element that associated to attribute.
$window: any;
       constructor(_element: ElementRef) 

         this.element = _element;
         // Get instance of DOM window.
         this.$window = angular.element(window);

         this.onResize();

    

    // Adjust height of element.
    onResize() 
         $(this.element.nativeElement).css('height', (this.$window.height() - 163) + 'px');
   

【讨论】：

提问者不是特别标记AngularJS aka Angular 1吗？

【参考方案3】：

你不应该需要 $watch。只需绑定到窗口上的调整大小事件：

DEMO

'use strict';

var app = angular.module('plunker', []);

app.directive('myDirective', ['$window', function ($window) 

     return 
        link: link,
        restrict: 'E',
        template: '<div>window size: widthpx</div>'
     ;

     function link(scope, element, attrs)

       scope.width = $window.innerWidth;

       angular.element($window).bind('resize', function()

         scope.width = $window.innerWidth;

         // manuall $digest required as resize event
         // is outside of angular
         scope.$digest();
       );

     

 ]);

【讨论】：

如果页面上不再使用该指令怎么办？只需为曾经存在的每个指令元素在其余时间不必要地触发事件回调即可。使用此指令转到一个页面一百次，并让事件处理一百次，无论当前显示哪个模板...

如果您想在指令不使用时进行清理，请在指令上执行 $destroy。 ***.com/questions/23031381/…

非常感谢您的简洁。