javascript - Updating scope inside directive and preventing Error: [$rootScope:inprog] -

javascript - Updating scope inside directive and preventing Error: [$rootScope:inprog] -

i'm trying alter scope info within directive , i'm getting thi error: [$rootscope:inprog] $digest in progress. tried $timeout did not help. i'm iterating through categories array , displaying breadcrumbs (e.g. something1 > something2 > something3 > something4) contained string in 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>

i want when container of div shrinked breadcrumbs responsively alter form 'something1 > ... > something3 > something4' or 'something1>...>something4' depending how wide container , how long breadcrumbs are.

to create happen have created directive called 'breadcrumbs' checking if size of related element bigger 20 means breadcrumb has shrinken. here directive..

angular.module('demo') .directive('breadcrumbs', [ '$log', '$window', function($log, $window) { 'use strict'; homecoming { restrict: 'a', link: function( scope, elem, attrs ){ scope.getelemheight = function() { homecoming elem.height(); } scope.shortenbreadcrumb = function(){ if (scope.getelemheight() > 20){ console.log(scope.getelemheight()); var breadcrumbarry = scope.category.name.split(" > "); var = 1; //remove breadcrumb breadcrumb until whole breadcrumbs string fits 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: '=' } } }]);

it works on load , on window resize i'm maintain getting mentioned error on console. have tried $timeout within while loop browser crashes because waits forever , never enters timeout function because called $scope.watch. i'm need help because have no ideas how solve it.

here working illustration http://jsfiddle.net/radiolaria/0btwgmzj/29/ if check console output you'll see error.

remove both $scope.$apply call, , replace calls shorten-bread-crumb scope.$evalasync(scope.shortenbreadcrumb);

javascript angularjs timeout angularjs-scope directive