CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Dave Barker
Dave Barker

Reputation: 6437

Angular ui carousel and directive scope issues

I've created a simple Plunker to demonstrate the issue.

I have a directive with an isolated scope which updates every one second to increment a local timer. I was expecting the isolated scope to not affect anything else.

In the Plunker example I can see the parents scope value isn't being updated but every one second the carousel is being 'refreshed'. Apologies if this isn't the correct angular term but I'm still learning.

This is my directive code:

app.directive('timer', ['$interval', function ($interval) {

    function link(scope, element, attrs) {
        var timeoutId;

        element.on('$destroy', function () {
            $interval.cancel(timeoutId);
        });

        // start the UI update process; save the timeoutId for canceling
        timeoutId = $interval(function () {
            scope.seconds++;
        }, 1000);
    }

    return {
        link: link,
        scope: {
            seconds: '@'
        },
        template: '<div>Isolated: {{seconds}}</div>'

    };
}]);

How do I ensure the timer doesn't cause a refresh of the carousel?

Upvotes: 0

Views: 303

Answers (2)

Dave Barker
Dave Barker

Reputation: 6437

I've finally got to the bottom of this. The issue wasn't the carousel but the $interval timer which was causing a $rootScope.$apply().

The $interval signature is function interval(fn, delay, count, invokeApply) so passing invokeApply as false prevents this from happening.

Upvotes: 0

Joe Jadamec
Joe Jadamec

Reputation: 156

a few things don't look right in your Plunker.

  1. binding a function like this is a bad idea. <p>{{hurro()}}</p>

  2. I don't use a directive to make a timer. $interval already does timing for you. You can modify you js script like this. remove the timer directive completely, add $interval to your controller, and call hurro from the Repeat function I added.
    You will see hurro() gets called independently of the Carousel refresh.

    function CarouselDemoCtrl($scope, $interval) {
  $scope.myInterval = 0;
  $scope.called=0;
  $scope.called2=0;
  $scope.mySeconds=10;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + slides.length;
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/300',
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
        ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }

    $scope.hurro = function() { $scope.called = $scope.called+1; $("#called").html($scope.called); }

          var refresh;
    $scope.Repeat = function () {
        refresh = $interval(function () {
            console.log("refresh at " + new Date().toString());
            $scope.hurro();
        }, 1000);
    }
    $scope.Repeat();

    }

Upvotes: 1

Related Questions