Окно просмотра AngularJS $ изменяет размер внутри директивы

У меня есть образец модуля, который выглядит так:

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

У меня возникают проблемы с интеграцией $ watch в это. В частности, просмотр размера windows с помощью функции «$ window».

[РЕДАКТИРОВАТЬ]:

Я понял, что моя проблема была все это время … Я ограничивал элемент, когда забывал, что я реализую его как атрибут … @ _ @;

Вам не нужны часы $. Просто привяжите к размеру событие в окне:

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

Вы можете прослушивать событие 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

 
,

Контроллер:

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

// Ниже приведена угловая директива 2.0 для размера windows, которая настраивает полосу прокрутки для предоставления элемента в соответствии с вашим тегом

 ---- 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'); } } 
  • Подождите, пока Angular 2 загрузит / разрешит модель перед отображением / шаблоном
  • Угловой 2, DomSanitizer, bypassSecurityTrustHtml, SVG
  • Как я могу проверить, какую версию Angular я использую?
  • Как игнорировать начальную загрузку при просмотре изменений модели в AngularJS?
  • Как интегрировать AngularUI в AngularJS?
  • Функция угловой области, выполняемая несколько раз
  • прекратить навигацию по угловому ui-маршрутизатору до тех пор, пока не будет разрешено promise
  • Угловой HttpPromise: разница между методами `success` /` error` и аргументами `then`
  • Наследование controllerа AngularJS
  • Что такое угловой эквивалент часов AngularJS $?
  • $ обеспечивают внешние блоки конфигурации
  • Давайте будем гением компьютера.