AngularJS $watch window resize inside directive
You shouldn't need a $watch. Just bind to resize event on window:
DEMO
'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();
});
}
}]);
You can listen resize
event and fire where some dimension change
directive
(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);
}
}]);
})();
In html
<div class="row" resize> ,
<div class="col-sm-2 col-xs-6" ng-repeat="v in tag.vod">
<h4 ng-bind="::v.known_as"></h4>
</div>
</div>
Controller :
$scope.$watch('width', function(old, newv){
console.log(old, newv);
})
// Following is angular 2.0 directive for window re size that adjust scroll bar for give element as per your 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');
}
}