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事件，因此必须强制进行角度摘要阶段