AngularJS $watch window resize inside 指令
AngularJS $watch window resize inside directive
我有如下所示的显示模块模式:
'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 调整大小,使用“$window”服务。
[编辑]:
我一直意识到我的问题是什么……我一直在限制元素,当我忘记我是将它实现为一个属性时……
@_@;
你不应该需要一块 $watch。只需绑定到 window:
上的调整大小事件
'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();
});
}
}]);
// 以下是 angular 2.0 指令 window 根据您的标签调整给定元素滚动条的大小
---- 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');
}
}
您可以监听 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
<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>
控制器:
$scope.$watch('width', function(old, newv){
console.log(old, newv);
})
我有如下所示的显示模块模式:
'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 调整大小,使用“$window”服务。
[编辑]:
我一直意识到我的问题是什么……我一直在限制元素,当我忘记我是将它实现为一个属性时…… @_@;
你不应该需要一块 $watch。只需绑定到 window:
上的调整大小事件'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();
});
}
}]);
// 以下是 angular 2.0 指令 window 根据您的标签调整给定元素滚动条的大小
---- 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');
}
}
您可以监听 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
<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>
控制器:
$scope.$watch('width', function(old, newv){
console.log(old, newv);
})