为什么我的代码出现"10 $digest错误"？

我想做一个简单的应用程序，检查浏览器的大小并标记它。但是，我注意到一条错误消息"错误：达到了[$rootScope:infdig]10$digest（）迭代。正在中止！"

app.controller('AppCtrl',function($window,$scope){
$scope.windowHeight;
$scope.windowWidth;
$scope.getWindowSize = function(){
    return {
        h:$window.innerHeight,
        w:$window.innerWidth
    };
};
$scope.$watch($scope.getWindowSize,function (newValue,oldValue){
    $scope.windowHeight = newValue.h;
    $scope.windowWidth = newValue.w;
});

});

HTML模板：

<!DOCTYPE html> 
<html ng-app="size-util">
   <head>
      <title></title>
      <script src="angular.js"></script> <script src="colorBorder.js"></script> 
   </head>
   <body ng-controller="AppCtrl">
      <div color-border='blue'>Welcome!</div>
      {{windowHeight}} {{windowWidth}} 
   </body>
</html>

以上是我的代码。我的代码出了什么问题？我错了$watch的东西吗？请告诉我这个问题。T_T

您肯定可以观察函数的返回值。$watch比较新旧值的差异（脏检查），但函数总是返回它生成的新对象，因此对象比较总是oldObj !== newObj，因此它触发了另一个等待值稳定的摘要循环，而它们从来没有这样做过

因此，避免这种情况的一种方法是只在其任何值发生变化时返回一个新对象：

var windowSize = {};
function getSize(){
  var h = $window.innerHeight,
      w = $window.innerWidth;
  if (windowSize.h !== h || windowSize.w !== w){
    windowSize = {h: h, w: w};
  }
  return windowSize;
}
$scope.$watch(getSize, function(newVal){...})

然而，请注意，这本身并不会触发摘要，因此，在其他东西触发摘要之前，仅通过调整窗口大小不会看到任何更改。

$scope.getWindowSize = function(){
    return {
        h:$window.innerHeight,
        w:$window.innerWidth
    };
};

上面的函数每次都返回一个新对象。

$scope.$watch($scope.getWindowSize,function (newValue,oldValue){
    $scope.windowHeight = newValue.h;
    $scope.windowWidth = newValue.w;
});

这里newValue和oldValue是两个不同的对象。

将第三个参数作为true（深度监视）传递给$watch函数。

$scope.$watch(watchFn, listernFn, deepWatch)

我怀疑你是否能让它发挥作用（即使你这样做，效率也会很低）。The $scope.watch() function creates a watch of some variable。在你的情况下，这是一个你正在跟踪的函数，它不会随着时间的推移而改变（函数本身保持不变）。如果您想跟踪window.resize，我建议您使用directive：http://microblog.anthonyestebe.com/2013-11-30/window-resize-event-with-angular/

相关内容

最新更新

热门标签：