窗口内部宽度更改的AngularJS事件

Question

我正在寻找一种方法来观察窗口内部宽度变化的变化.我尝试了以下内容,但没有奏效:

$scope.$watch('window.innerWidth', function() {
     console.log(window.innerWidth);
});

有什么建议？

Answer 1

我们可以用jQuery做到这一点:

$(window).resize(function(){
    alert(window.innerWidth);

    $scope.$apply(function(){
       //do something to update current scope based on the new innerWidth and let angular update the view.
    });
});

请注意,当您在可以重新创建的作用域内绑定事件处理程序时(如ng-repeat作用域,指令作用域,...),您应该在作用域被销毁时取消绑定事件处理程序.如果不这样做,每次重新创建范围(重新运行控制器)时,将再添加1个处理程序,从而导致意外行为和泄漏.

在这种情况下,您可能需要标识附加的处理程序:

  $(window).on("resize.doResize", function (){
      alert(window.innerWidth);

      $scope.$apply(function(){
          //do something to update current scope based on the new innerWidth and let angular update the view.
      });
  });

  $scope.$on("$destroy",function (){
      $(window).off("resize.doResize"); //remove the handler added earlier
  });

在这个例子中,我正在使用来自jQuery的事件命名空间.你可以根据自己的要求做不同的事情.

改进:如果您的事件处理程序需要花费很长时间来处理,为了避免用户可能继续调整窗口大小的问题,导致事件处理程序多次运行,我们可以考虑限制该函数.如果您使用下划线,您可以尝试:

$(window).on("resize.doResize", _.throttle(function (){
    alert(window.innerWidth);

    $scope.$apply(function(){
        //do something to update current scope based on the new innerWidth and let angular update the view.
    });
},100));

或者去除功能:

$(window).on("resize.doResize", _.debounce(function (){
     alert(window.innerWidth);

     $scope.$apply(function(){
         //do something to update current scope based on the new innerWidth and let angular update the view.
     });
},100));

节流和去抖函数之间的区别

Answer 2

不需要jQuery!这个简单的代码段对我来说很好.它使用angular.element()来绑定窗口大小调整事件.

/**
 * Window resize event handling
 */
angular.element($window).on('resize', function () {
    console.log($window.innerWidth);
});    

解开事件

/**
 * Window resize unbind event      
 */
angular.element($window).off('resize');

Answer 3

我找到了一个可能有帮助的小提琴:http: //jsfiddle.net/jaredwilli/SfJ8c/

我已经重构了代码,使其更简单.

// In your controller
var w = angular.element($window);
$scope.$watch(
  function () {
    return $window.innerWidth;
  },
  function (value) {
    $scope.windowWidth = value;
  },
  true
);

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

然后,您可以从html引用windowWidth

<span ng-bind="windowWidth"></span>

Answer 4

如果Khanh TO的解决方案为您造成UI问题(就像它对我做的那样)尝试使用$timeout不更新属性,直到它保持500ms不变.

var oldWidth = window.innerWidth;
$(window).on('resize.doResize', function () {
    var newWidth = window.innerWidth,
        updateStuffTimer;

    if (newWidth !== oldWidth) {
        $timeout.cancel(updateStuffTimer);
    }

    updateStuffTimer = $timeout(function() {
         updateStuff(newWidth); // Update the attribute based on window.innerWidth
    }, 500);
});

$scope.$on('$destroy',function (){
    $(window).off('resize.doResize'); // remove the handler added earlier
});

参考:https://gist.github.com/tommaitland/7579618