CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Dave Barker
Dave Barker

Reputation: 6437

Angular ui carousel binding repeated called

I've created a simple plunkr to try and understand why a scope function fires so many times on an angular ui carousel.

The html looks like the following

<div uib-carousel id="myC" interval="myInterval">
      <div uib-slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{$index}}</h4>
          <p>{{slide.text}}</p>
          <p>{{hurro()}}</p>
        </div>
      </div>
</div>

When you click next on the carousel the scope.hurro is called approximately 40 times. Why does this happen and how do I prevent it?

Upvotes: 2

Views: 200

Answers (2)

Piittis
Piittis

Reputation: 318

It happens because of these expressions in the view:

{{called}}
{{hurro()}}

When you add those expressions to the view, angular registers watcher functions to watch them for changes and update the view accordingly. Well because these watchers themselves can change the model, like hurro(), which increments the called value, to make sure the view and model are all synced up, angular keeps executing the watchers until the model is stable. But the hurro() watcher changes the model each time so the model never becomes stable. This leads to an infinite loop which in turn leads to an error message as you can see if check the console: https://docs.angularjs.org/error/$rootScope/infdig

Removing the {{called}} expression removes the problem as you can see in this updated plunkr

So by tracking the problem, you sort of caused it, funnily enough.

Upvotes: 2

ismail baig
ismail baig

Reputation: 891

try like this in your controller, this may not solve your exact issue but can give you the idea.

I checked in console, with event.preventDefault the called is getting incremented 44 times but console message is getting called only once.

 $scope.hurro = function() {
      console.log('called once with event.preventDefault();');
      console.log('called 44 times without event.preventDefault();');

      $scope.called = $scope.called+1; // but in either case 
                                       // called parameter 
                                       // is getting incremented to 44
    event.preventDefault();

}

plkr here

Upvotes: 2

Related Questions