Question

我想创建一个简单的应用程序，检查浏览器的大小并标记它。但是，我注意到一条错误消息＆＃34;错误：[$ rootScope：infdig] 10 $ digest（）迭代达成。中止＆＃34;！

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>

以上是我的代码。我的代码出了什么问题？我看错了吗？请让我知道这个问题。 T_T

Answer 1

$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)

Answer 2

您绝对可以观看返回值的函数。 $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){...})

但请注意，这本身并不会触发摘要，因此，只要调整窗口大小，就不会看到任何更改，直到其他内容触发摘要为止。

Answer 3

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

为什么我的代码会出现＆＃34; 10 $ digest error＆＃34;？

3 个答案: