0

以下指令导致无限摘要循环，我不知道为什么。关于如何重新编写代码的任何想法？

谢谢！

  .directive('fitHeight', ['$window', '$timeout', '$location', function ($window, $timeout, $location) {
return {
  restrict: 'A',
  scope: true,
  link: function (scope, element, attr) {
    scope.docHeight = $(document).height();
    var setHeight = function (newVal) {
      var diff = $('header').height();
      if ($('body').hasClass('layout-horizontal')) diff += 112;
      if ((newVal-diff)>element.outerHeight()) {
        element.css('min-height', (newVal-diff)+'px');
      } else {
        element.css('min-height', $(window).height()-diff);
      }
    };
    scope.$watch('docHeight', function (newVal, oldVal) {
      setHeight(newVal);
    });
    $(window).on('resize', function () {
      setHeight($(document).height());
    });
    var resetHeight = function () {
        scope.docHeight = $(document).height();
        $timeout(resetHeight, 1000);
      }
    $timeout(resetHeight , 1000);
  }
};
4

2 回答 2

0

你$timeout(resetHeight, 1000)导致Infinite $digest loop. 这是因为该方法resetHeight正在更改变量$scope.docHeight并开始另一个$timeout循环$timeouttriggers $scope.$apply()。在内部，Angular 会监视看起来或实际上是什么，并且是无穷无尽$digest loop的，如果它发现这种情况就会引发异常。

我必须做一些类似于你正在做的事情，我不会对事件做Debouncing逻辑Window Resize。这是因为在调整窗口大小时会触发该事件。您将需要throttle处理程序调用，这样您就不会拥有$digest loops.

在下面的示例中，我将 Lodash 用于我的去抖动逻辑。

http://plnkr.co/edit/vUHcgpveDvijGE6l1LXy?p=preview

            angular.module('myApp', [])
                .directive('fitHeight', ['$window', '$timeout', '$location', function ($window, $timeout, $location) {
                    return {
                        restrict: 'A',
                        scope: true,
                        link: function (scope, element, attr) {
                            function setHeight(newVal) {
                                var diff = $('header').height();

                                if ($('body').hasClass('layout-horizontal')) {
                                    diff += 112;
                                }

                                if ((newVal - diff) > element.outerHeight()) {
                                    element.css('min-height', (newVal - diff) + 'px');
                                    console.log('if');
                                } else {
                                    element.css('min-height', $(window).height() - diff);
                                    console.log('else');
                                }
                            }

                            setHeight($(document).height());

                            var docHeight = $(document).height();
                            var heightCheck = function() {
                                if (docHeight != $(document).height()) {
                                    docHeight = $(document).height();

                                    setHeight(docHeight);
                                }
                            };

                            var lazyHeightCheck = _.debounce(heightCheck, 200);
                            $(window).on('resize', lazyHeightCheck);

                            element.on('$destroy', function() {
                                $(window).off('resize', lazyHeightCheck);
                            });
                        }
                    }
                }]);
于 2015-04-03T00:20:45.570 回答
0

您有一个无限循环调用 resetHeight 函数内部的 resetHeight 函数。无限的 $digest 循环是无限循环的副作用。

于 2015-04-03T00:02:44.707 回答