最近，我发现了这个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传递了一个函数，当其返回值不同时，将触发回调。所以，每$消化周期，如果w.height()或w.width()已经改变，回调被触发，而$作用域属性被更新。最后，您有了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'
};
};
}
}
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句