了解帶范圍的窗口大小調整事件。$ 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