gpt4 book ai didi

javascript - 了解具有作用域的窗口调整大小事件。$apply with $watch on a function

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:00:02 24 4
gpt4 key购买 nike

最近我发现了这个http://jsfiddle.net/jaredwilli/SfJ8c/我能够让它发挥作用。

var app = angular.module('miniapp', []);

app.directive('resize', function ($window) {
return function (scope, element) {
var w = angular.element($window);
scope.getWindowDimensions = function () {
return {
'h': w.height(),
'w': w.width()
};
};
scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
scope.windowHeight = newValue.h;
scope.windowWidth = newValue.w;

}, true);

w.bind('resize', function () {
scope.$apply();
});
}
})

但问题是,我不知道它是如何工作的?为什么是 scope.$apply()?它的目的是什么?为什么 scope.getWindowDimensions 会在调整窗口大小时更新?

最佳答案

$watch 的第一个参数可以是字符串或函数。如果你传递一个像$scope.$watch('foo'这样的字符串,它正在监视$scope.foo。如果你传递一个函数,那么监视就在函数的返回值。Angular 将在每个 $digest 周期触发该函数。如果返回值与之前的 $digest 周期不同,回调函数(第二个参数)将触发。在这段代码中,scope.getWindowDimensions 是一个被传递的函数,当它的返回值不同时,回调将被触发。所以,每个 $digest 循环,如果 w.height()w.width( ) 发生了变化,触发了回调,并且更新了 $scope 属性。最后,您设置了 true (第三个)参数,这使得 $watch 成为深度监视,所以Angular 将彻底检查对象,判断它是否相同,即使每次都是一个新对象。如果没有这个,Angular 将进行快速检查,确定它是一个新对象,然后开始无限循环。

scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
scope.windowHeight = newValue.h;
scope.windowWidth = newValue.w;
}, true);

最后,除非触发 $digest 循环,否则上面的代码不会执行任何操作。以下代码将事件监听器附加到 window,以便在调整窗口大小时触发该函数。 scope.$apply() 只是触发一个 $digest 循环,以便检查 scope.getWindowDimensions,并触发回调。

w.bind('resize', function () {
scope.$apply();
});

综上所述,我发现这段代码有点笨拙。这就是我要写的。这种方式对我来说更有意义 - 更易于阅读,而且性能应该更高。

app.directive('resize', function ($window) {
return function (scope, element) {
var w = angular.element($window);
w.bind('resize', function () {
// trigger $digest when window is resized and call `update` function
scope.$apply(update);
});
update(); // initial setup
function update() {
var height = w.height();
var width = w.width();
scope.windowHeight = height;
scope.windowWidth = width;
scope.style = function() {
return {
'height': (height - 100) + 'px',
'width': (width - 100) + 'px'
};
};
}
}
})

Live demo here.

关于javascript - 了解具有作用域的窗口调整大小事件。$apply with $watch on a function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28911198/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com