Question

我使用指令计算html元素的最小高度，当我尝试通过范围更新父范围值时。$ apply（）我收到此错误：$digest already in progress

我知道有很多这样的主题但是给定的解决方案都不适合我。这是我的观点：

<header id="headerFR"> header content here </header>
<main id="contentFR" main-min-height ng-style="{'min-height': calcMinHeight}">
    {{calcMinHeight}}
    <welcome:info></welcome:info>
    <button type="button" class="appTOS">{{tosBtnLbl}}</button>
</main>
<footer id="footerFR"> footer content here </footer>

... ctrl：

FIRSTRUN.controller('WelcomeCtrl', ['$scope', '$location', function($scope, $location){
    ...
    $scope.calcMinHeight;
    ...
}]);

和我的指示：

FIRSTRUN.directive('mainMinHeight', ['$window', function($window){
    return{
        restrict: 'A',
        scope: { calcMinHeight: '=' },

        link: function(scope, el, attrs){
            var headerHeight = angular.element('header').outerHeight();
            var windowHeight = angular.element($window).height();

            var mainMinHeight = windowHeight - headerHeight;
            scope.$parent.calcMinHeight = mainMinHeight + 'px';
            scope.$apply();

        }
    }
}])

我总是可以使用scope.$parent.calcMinHeight更新父范围值，但在这种情况下，指令的范围规则不会起作用（例如，如果我想要隔离范围）通过＆＃39; @＆＃39;，ctrl仍然会收到更新）。

另外，我可以通过angluar.element(el).css('min-height', mainMinHeight+'px')设置最小高度值，但我想以角度方式进行设置。

问题在哪里？
*对任何事物使用角度1.3.5。

答案：

解决错误就足以删除范围。$ apply（）行，因为我已经在$ digest循环中，因为@enzey＆amp; @Andrew Counts说另外，我误解了范围的工作方式，我需要更好的概述，我发现它here。我只是认为指令可以有自己的范围，比如ctrls，从一开始就是问题。

Answer 1

如果您的代码在摘要期间调用$ apply，则会发生此错误。一种可能的解决方法是将代码包装在对$ timeout服务的调用中：

//add $timeout to controller parameters
$timeout(function(){
  ///...
  scope.$parent.calcMinHeight = mainMinHeight + 'px';
  //timeout will automatically trigger an $apply
}, 0);

这将为执行高度计算之前允许浏览器渲染提供额外的好处

在指令链接中$ apply之后，AngularJS $摘要已经运行

答案：

1 个答案: