了解带范围的窗口大小调整事件。$ 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.$watch('foo' ，它正在观察$scope.foo 。如果你传递一个函数，那么watch就在函数的返回值上$scope.foo将在每个$上触发函数摘要循环。如果返回的值不同于前一个$ digest循环，则会触发回调函数（第二个参数）。在此代码中， scope.getWindowDimensions是一个传递的函数，当它的返回值不同时，回调将触发那么，每个$摘要周期，如果w.height()或w.width()发生了变化，则会触发回调，并更新$ scope属性。最后，你有true （第三个）参数集，这使得$观看深度观察，以便Angular将彻底检查对象，判断它是否相同，即使它每次都是一个新对象。如果没有这个，Angular会快速检查，看到它是一个新对象，并且开始无限循环。

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

最后，除非触发$摘要周期，否则上述代码将不会执行任何操作。 以下代码将事件侦听器附加到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'
        };
      };
    }   
  }
})

现场演示。

Answer 2

首先它最好先谷歌，然后在这里问你的疑问，但无论如何，如果你没有得到任何东西，这里是摘要： -

w.bind('resize',callback) 

函数将窗口的resize事件绑定到w因此如果w.height()和w.width()窗口调整大小值改变那么你有scope.$watch(scope.getWindowDimensions,callback); 观察scope.getWindowDimensions的变化，它肯定会在改变窗口大小时改变，而窗口大小又会调用回调函数。

现在我们为什么要使用scope.$apply(); 共振很简单w.bind超出了角度范围，因此您需要运行将通过scop.$apply手动运行的摘要循环scop.$apply 。

抱歉英语不好:-P