AngularJS element.bind（'resize'）不更新$ scope變量

Question

我正在嘗試使用以下代碼為瀏覽器窗口的innerWidth設置范圍變量。 在控制台中查看時可以使用，但是該功能不會更新$ scope變量。 為什么？

angular.element($window).bind('resize', function () {
    console.log('resize', $window.innerWidth);  // I can see change here
    $scope.window_width = $window.innnerWidth;  // no change here
});

Answer 1

您輸入問題時可能犯了一個愚蠢的錯誤。

 $scope.window_width = $window.innnerWidth; //innnerWidth should be innerWidth

更新范圍變量后，需要通過調用$scope.$digest();手動運行摘要循環$scope.$digest(); 因為調整大小是在角度范圍之外發生的，所以我們必須告訴角度范圍中有一些要更新的內容。

還有什么可以代替$digest()呢？

1. 您可以將代碼包裝在$timeout ，它將觸發自身的摘要周期

   $timeout(function() { $scope.window_width = $window.innerWidth; });

2. 使用$scope.$apply(); 喜歡

   $scope.window_width = $window.innerWidth; $scope.$apply();

這是一個演示

Answer 2

您將綁定與Angular之外的jQlite綁定，因此您必須在此處手動調用$digest循環，否則Angular不知道有更改。

angular.element($window).bind('resize', function () {
    console.log('resize', $window.innerWidth);  
    $scope.window_width = $window.innerWidth; 
    $scope.$evalAsync(); 
});

$scope.$evalAsync()將調用摘要循環，從而在相同的js事件滴答中觸發更多的機會，然后在$timeout中觸發（ 此處有更多信息）

Answer 3

嘗試這個 ：

$scope.$apply(function() { $scope.window_width = $window.innnerWidth; })

綁定dom事件，因此必須強制進行角度摘要階段