AngularJS的作用域直到在ui中做了一些事情才会更新，比如点击一个带有函数的对象

AngularJS scope doesn't update until do something in ui, like click a object with a function

本文关键字：函数 对象 更新 一个 ui 作用域 AngularJS      更新时间：2023-09-26

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

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

它在第一次加载时记录，但是当我调整大小时，我必须在它再次触发之前进行一些点击。例如，我调整了大小，然后我点击了一个具有ng-click行为的项目，然后这是唯一一次，它再次记录。

我读了一些问题，很可能是由于$digest和$apply?

有人能给我点化一下吗

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

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

根据我，你可以尝试指令和检查使用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>

小提琴

请让我知道这是否有效

1) user1162084说什么

2) watch on function(){return $window. innerwidth;}的方法将不起作用，因为窗口的大小调整不会导致$digest循环的开始。

$watch表达式只在$digest循环中重新求值。没有$digest循环=没有重新求值。在angularjs中$digest循环开始:

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

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

c)使用$http完成http请求并执行成功'错误处理程序后

可能有其他情况，但关键是调整窗口的大小不属于这些类型的事件，这导致$digest周期的开始。

这也解释了为什么你提供的代码只有在ng-click执行后才能得到更新

相关文章：