Javascript 正在更新指令内的作用域并防止错误：[$rootScope:inprog]

我试图更改指令内的作用域数据，但得到了以下错误：[$rootScope:inprog]$digest已在进行中。 我尝试使用$timeout，但没有效果。 我正在遍历categories数组并显示面包屑（例如，something1>something2>something3>something4），它们作为字符串包含在category.name中

<div ng-repeat="category in categories">
       <div breadcrumbs="breadcrumbs" category="category">
        <span class="description" id="name_{{category.id}}" >{{category.name}}</span>
       <div>
</div>

它在加载和调整窗口大小时工作得很好，但我一直在控制台上被提到错误。我尝试过在while循环中使用$timeout，但是我的浏览器崩溃了，因为它会一直等待，并且永远不会进入timeout函数，可能是因为它是从$scope.watch调用的。 我真的需要帮助，因为我不知道如何解决它

---

下面是一个工作示例，如果您检查控制台输出，您将看到错误。

同时删除

$scope.$apply

调用，并将缩短面包屑的调用替换为

scope.$evalAsync（scope.shortenBreadcrumb）
最有可能的罪魁祸首是$watch，而且您对$watch的语法不正确…好的，当我从watch中删除'true'时，它是相同的。您还有什么建议？如何解决这个问题？尝试删除while循环…我尝试过。它没有帮助，我需要它，因为在每个while循环中，我都会删除一个breadcrumb，直到整个breadcrumbs表达式适合窗口。我还添加了对现有情况的处理
angular.module('demo')
.directive('breadcrumbs', [ '$log', '$window', function($log, $window) {
    'use strict';

    return {
        restrict: 'A',
        link: function( scope, elem, attrs ){
                scope.getElemHeight = function() {
                    return elem.height();
                }

                scope.shortenBreadcrumb  = function(){
                    if (scope.getElemHeight() > 20){  
                        console.log(scope.getElemHeight());
                         var breadcrumbArry = scope.category.name.split(" > ");
                         var i = 1;
                 //remove breadcrumb by breadcrumb until whole breadcrumbs string fits the container
                 while ((scope.getElemHeight() > 20) && (breadcrumbArry.length > 3)){
                            if (i == 1) breadcrumbArry[i] = "..."
                            else breadcrumbArry.splice(2, 1); // remove 1 element on index 2
                            scope.category.name = breadcrumbArry.join(" > ");
                            i++;
                            scope.$apply();
                 }
                    }

                }

                // Set on load
                scope.$watch(scope.getElemHeight, function (newValue, oldValue) {
                    scope.shortenBreadcrumb();
                    console.log("LOOOOOOAD "+scope.category.id);
                }, true);

                // Set on resize
                angular.element($window).bind('resize', function () {
                    scope.category.name = scope.category.fullBreadcrumb;
                    scope.shortenBreadcrumb();
                    scope.$apply();

                });                 
        },  
        scope: {
            category: '='
        }
    }
}]);