Окно просмотра 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».
[РЕДАКТИРОВАТЬ]:
- Угловой разъем с несколькими маршрутизаторами в одном шаблоне
- Угловое 2 - Тестирование устройства с помощью маршрутизатора
- Угловой JS: как привязываться к обещаниям
- Ошибка при попытке установить diff
- Угловые 2-компонентные тестовые компоненты с маршрутизаторомLink
Я понял, что моя проблема была все это время … Я ограничивал элемент, когда забывал, что я реализую его как атрибут … @ _ @;
- ngFor с индексом как значение в атрибуте
- Не удалось найти имя «require» после обновления до Angular4
- Нужно ли моей ng-модели иметь точную точку, чтобы избежать проблем с областью?
- Подключение express.js с помощью Angular CLI в среде dev
- angularJS: как вызвать функцию дочернего объекта в родительском пространстве
- Что такое ng-transclude?
- Подождите, пока Angular 2 загрузит / разрешит модель перед отображением / шаблоном
- Как игнорировать начальную загрузку при просмотре изменений модели в AngularJS?
Вам не нужны часы $. Просто привяжите к размеру событие в окне:
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'); } }