Question

我正在尝试使用下面的代码为浏览器窗口的innerWidth设置范围变量。它在控制台中查看时有效，但该函数未更新$ scope变量。为什么呢？

file:///storage/emulated/0/Android/data/my-app-id/cache

Answer 1

当你输入问题时，你可能犯了一个愚蠢的错误。

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

并且在更新范围变量之后，您需要通过调用$scope.$digest();手动运行摘要循环，因为调整大小是在角度之外发生的事情所以我们必须告诉角度在范围内有更新的东西。

我们可以使用什么来代替$digest()？

你可以将代码包装在$timeout中，它会自动触发摘要周期

$timeout(function() { $scope.window_width = $window.innerWidth; });
使用$scope.$apply();之类的

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

这是一个demo

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（更多信息here）

Answer 3

试试这个：

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

绑定dom事件，因此必须强制使用角度消化阶段

AngularJS element.bind（＆＃39; resize＆＃39;）没有更新$ scope变量

3 个答案: