AngularJS $ watch窗口内部尺寸调整指令 [英] AngularJS $watch window resize inside directive

问题描述

我有显示如下的模块模式:

I have revealing module pattern which looks like this:

'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"服务，专门监视窗口的大小.

What I'm having trouble with is integrating a $watch into this. Specifically watching for window resize, with the '$window' service.

:

我一直都在意识到我的问题...当我忘记将它作为一个属性来实现时，我只能使用element ... @ _ @;

I realised what my issue was this whole time... I was restricting to element, when I forgot that I was implementing it as an attribute... @_@;

推荐答案

您不需要$ watch.只需绑定到窗口上的调整大小事件即可:

You shouldn't need a $watch. Just bind to resize event on window:

演示

'use strict';

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

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

     return {
        link: link,
        restrict: 'E',
        template: '<div>window size: {{width}}px</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();
       });

     }

 }]);

这篇关于AngularJS $ watch窗口内部尺寸调整指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！