AngularJS $ janela de visualização resize dentro da diretiva

Eu tenho revelando padrão de módulo que se parece com isso:

'use strict'; angular.module('app', []) .directive('myDirective', ['SomeDep', function (SomeDep) { var linker = function (scope, element, attr) { // some work }; return { link: linker, restrict: 'E' }; }]) ; 

O que estou tendo problemas é integrar um $ watch nisso. Especificamente observando o redimensionamento da janela, com o serviço ‘$ window’.

[EDITAR]:

Percebi que o meu problema foi esse tempo todo … eu estava me restringindo ao elemento, quando esqueci que estava implementando isso como um atributo … @ _ @;

Você não precisa de um relógio $. Apenas ligue para resize o evento na janela:

DEMO

 'use strict'; var app = angular.module('plunker', []); app.directive('myDirective', ['$window', function ($window) { return { link: link, restrict: 'E', template: '
window size: {{width}}px
' }; 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(); }); } }]);

Você pode ouvir o evento de resize e triggersr onde alguma alteração de dimensão

diretiva

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

Em html

 
,

Controlador:

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

// A seguir está a diretiva angular 2.0 para resize a janela que ajusta a barra de rolagem para dar elemento conforme sua tag

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