-1

I have a div with ng-class="{minifyClass: minifyCheck}".

In my controller I watch two parameters if they change. The $window.outerHeight and the $('#eventModal > .modal-dialog').height(). If they change I call the minifyChange() to do stuff.

function minifyChange(){
    if( $('#eventModal > .modal-dialog').height()+75 < $window.outerHeight ){
        $scope.minifyCheck = true;
    }else{
        $scope.minifyCheck = false;
    }
    //$scope.$digest();
}


$scope.$watch(function () {
   return $('#eventModal > .modal-dialog').height()
},function(){ return minifyChange() }, true)

$scope.$watch(function () {
   return $window.outerHeight;
},function(){ return minifyChange() }, true)

With the $scope.$digest() commented I have to "wait" until the next $scope.$digest() or $scope.$apply() happens so as the minifyClass is added or removed based on the minifyCheck's value. "Waiting" does not give an optimal user experience.

If I comment out the $scope.$digest() I will get an error that the $digest is already in progress:

Error: [$rootScope:inprog] http://docs.angularjs.org/error/$rootScope:inprog?p0=$digest

My angular code is quite complex to see what is the previous running digest however here is the full error:

Error: [$rootScope:inprog] http://errors.angularjs.org/undefined/$rootScope/inprog?p0=%24digest
    at Error (<anonymous>)
    at http://localhost:8000/static/angular/angular.min.js:6:453
    at h (http://localhost:8000/static/angular/angular.min.js:93:109)
    at g.$digest (http://localhost:8000/static/angular/angular.min.js:96:74)
    at minifyChange (http://localhost:8000/e=52a1a39345dc83b057c17dc1#v1:444:12)
    at Object.fn (http://localhost:8000/e=52a1a39345dc83b057c17dc1#v1:450:22)
    at g.$digest (http://localhost:8000/static/angular/angular.min.js:96:367)
    at g.$apply (http://localhost:8000/static/angular/angular.min.js:99:100)
    at http://localhost:8000/static/angular/angular.min.js:17:320
    at Object.d [as invoke] (http://localhost:8000/static/angular/angular.min.js:30:21) angular.js:8058
(anonymous function) angular.js:8058
(anonymous function) angular.js:5730
g.$digest angular.js:9096
g.$apply angular.js:9363
(anonymous function) angular.js:1127
d angular.js:3146
Sb.c angular.js:1125
Sb angular.js:1140
Mc angular.js:1091
(anonymous function) angular.js:17902
l jquery-2.0.3.js:2913
c.fireWith jquery-2.0.3.js:3025
x.extend.ready jquery-2.0.3.js:398
S jquery-2.0.3.js:398

My question: is there any way to update the class avoiding the error? Maybe another angular function that I miss? Or if cannot be avoided to use the $digest how can I track the other digest that is running so as I can debug it?

Diolor
  • 13,181
  • 30
  • 111
  • 179
  • 1
    This should really be done in a directive. As a rule of thumb, you should almost never have to use a jquery selector inside of a controller. Can you post your html markup for the `#eventModal` and `.modal-dialog` elements and I'll see if I can turn this code into a directive... – tennisgent Dec 20 '13 at 17:47
  • 2
    Your syntax is totally a angular antipattern you should not be watching jquery variables and values inside a controller either you should create a diretive and register for onresize event etc – Ajay Beniwal Dec 20 '13 at 17:48
  • Since you are _touching_ a variable on the scope (`minifyCheck`) rendering it _dirty_, another `$digest` loop should execute immediately after the present one ends. That loop will change the `minifyCheck` class for you. I think the `waiting` in _"Waiting" does not give an optimal user experience._ is coming from elsewhere, not due to the time it takes for two `$digest` loops to run. – musically_ut Dec 20 '13 at 17:51
  • shouldn't there be quotes around class name ng-class="{'minifyClass': minifyCheck}"? – Bhalchandra K Dec 20 '13 at 18:07

1 Answers1

0

It is always better if you leave DOM access to directives instead of your controller. I would suggest you to do the following.

Create a directive that watches element.height() and $window.height(). (You can find an example here). Also read How (not) to watch element size changes

Whenever the watch function is triggered, compute the value for minifyCheck. Hope this helps.

Community
  • 1
  • 1
Anirudhan J
  • 2,072
  • 6
  • 27
  • 45