窗口內部寬度大小變化的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重複範圍，指令範圍，..），你當範圍被銷燬時應該解除綁定你的事件處理程序。如果你不這樣做，那麼每次當範圍被重新創建（控制器重新運行）時，會增加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 
    }); 

在這個例子中，我使用event namespace從jQuery的。根據你的要求你可以做不同的事情。

改進：如果你的事件處理程序需要稍長的時間來處理，以避免用戶可以繼續調整窗口大小，導致事件處理程序要運行很多次這個問題，我們可以考慮節流的功能。如果你使用underscore，你可以試試：

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

Difference Between throttling and debouncing a function

Answer 2

如果慶TO的溶液中引起的界面問題爲你（就像它爲我做的）嘗試使用$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

Answer 3

我發現了一個jfiddle，這可能有助於在這裏：​​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

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

Answer 4

無需jQuery的參考WINDOWWIDTH！這個簡單的代碼片段適合我。它使用angular.element()來綁定窗口大小調整事件。

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