直到在ui中执行某些操作（例如单击具有函数的对象），AngularJS范围才会更新

Question

我试图在视口小于或等于641px时将类添加到侧边栏，并且在这种情况下，我必须注意窗口的宽度

    $scope.$watch(function(){
       return $window.innerWidth;
    }, function(value) {
        if (value <= 641) {
            logger.info('!!!less than 641');
            vm.singleColumn = true;
        };
    });

它会在首次加载时记录日志，但是当我调整大小时，我必须先单击一下，然后才能再次触发。 例如，我调整了大小，然后单击了具有ng-click行为的项目，这是唯一的一次，它将再次记录。

我已经阅读了一些问题，可能是因为$ digest和$ apply？

有人可以照亮我的困惑。

Answer 1

您需要触发摘要周期，否则视图不会意识到该值已更新。

$scope.$watch(function(){
   return $window.innerWidth;
}, function(value) {
    if (value <= 641) {
        logger.info('!!!less than 641');
        vm.singleColumn = true;
        $scope.$apply();
    };
});

Answer 2

据我说，您可以尝试指令，并使用jquery检查窗口调整大小，并相应地更新变量。 我在这里有一个例子，请检查

 var app = angular.module('miniapp', []); function AppController($scope) { /* Logic goes here */ } app.directive('resize', function ($window) { return function (scope, element) { var w = angular.element($window); scope.getWindowDimensions = function () { return { 'h': w.height(), 'w': w.width() }; }; scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) { scope.windowHeight = newValue.h; scope.windowWidth = newValue.w; scope.style = function () { return { 'height': (newValue.h - 100) + 'px', 'width': (newValue.w - 100) + 'px' }; }; }, true); w.bind('resize', function () { scope.$apply(); }); } }) 

 div { border:1px solid red; } 

 <div ng-app="miniapp" ng-controller="AppController" ng-style="style()" resize>window.height: {{windowHeight}} <br />window.width: {{windowWidth}} <br /> </div> 

小提琴

请让我知道这是否有效

Answer 3

1）user1162084说什么

2）在function（）{return $ window.innerWidth;}上进行监视的方法将不起作用，因为窗口大小的调整不会导致$ digest循环的开始。

仅在$ digest循环中重新评估$ watch表达式。 没有$ digest循环=没有重新评估。 在angularjs中，$ digest循环开始：

a）执行ng-click中的代码后

b）执行$ timeout或$ interval中的函数之后。

c）用$ http发出的http请求完成并执行了成功\\错误处理程序后

可能存在其他情况，但重点是窗口的调整大小不属于这些类型的事件，这会导致$ digest循环的开始。

这也解释了为什么使用您提供的代码仅在执行ng-click之后才获得更新