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

Question

最近我发现了这个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 会在调整窗口大小时更新？

Answer 1

$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.