了解带范围的窗口大小调整事件。$ apply with $ watch on a function

Question

Recently I found this http://jsfiddle.net/jaredwilli/SfJ8c/ and I am able to get it works.

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();
        });
    }
})

But the problem is, I don't know how it works? Why scope.$apply() ? What is the purpose of it? Why scope.getWindowDimensions will get updated when window is resized?

Answer 1

The first argument to $watch can be a string or a function. If you pass a string like $scope.$watch('foo' , it is watching $scope.foo . If you pass a function, then the watch is on the return value of the function. Angular will fire the function on every $digest cycle. If the returned value is different than the previous $digest cycle, the callback function (second parameter) will fire. In this code, scope.getWindowDimensions is a function being passed and when its return value is different, the callback will fire. So, every $digest cycle, if w.height() or w.width() have changed, the callback is fired, and the $scope properties are updated. Finally, you have the true (third) parameter set, which makes the $watch a deep watch, so that Angular will thoroughly check the object, to tell whether it is identical, even though it's a new object every time. Without this, Angular will do a quick check, see that it's a new object, and start an infinite loop.

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

Lastly, the code above won't do anything unless a $digest cycle is triggered. The following code attaches an event listener to window so that the function is fired when the window is resized. scope.$apply() just triggers a $digest cycle so that scope.getWindowDimensions will be checked, and the callback will be fired.

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

With all that said, I find this code to be a bit awkward. This is how I'd write it. This way makes a lot more sense to me - easier to read, and should be more performant.

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.

Answer 2

First of all its better to google first and then ask your doubt here but anyways if you didn't get anything from it here is the summary:-

w.bind('resize',callback) 

function binds the resize event of window to w therefore if window resize value of w.height() and w.width() change So you are having scope.$watch(scope.getWindowDimensions,callback); watch the changes in scope.getWindowDimensions which is definately gonna change on changing the window size which in turn calll the callback function.

Now why we are using scope.$apply(); The reson is simple w.bind is out of scope of angular so you need to run the digest cycle which is going to run manually by scop.$apply .

Sorry for bad english :-P