AngularJS $ watch窗口内部尺寸调整指令

Question

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

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

[编辑]：

我意识到这一直是我的问题…当我忘记将其实现为属性时，我只能使用element … @ _ @;

Answer 1

您不需要手表。只需绑定到窗口上的大小调整事件：

演示

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

     }

 }]);