Сбросить интервал видимости в цикле создания директивы angularjs

Question

В моей директиве agnularjs есть объект, содержащий логику некоторого сценария

$scope.slider = {
    increment: 0,
    step: 1,
    positionTop: 0,
    init: function (step, isClick) {
        if(isClick) clearInterval($scope.interval);
        ...rest of script...

и ниже, после закрытия $scope.slider (}) у меня есть этот код

$timeout(function () {
    $scope.slider.changeSlide($scope.slider.step);
    $scope.interval = setInterval(function () {
        $scope.slider.step++;
        if($scope.slider.step === 5) $scope.slider.step = 1;
        $scope.slider.changeSlide($scope.slider.step);
    }, 5000);
});

При загрузке страницы я начинаю init метод работы, а затем, когда пользователь дополнительно нажимает этот HTML-тег

<span class="main__last-added-dot"
      data-ng-class="slider.step == 1 ? 'main__last-added-dot--active' : ''"
      data-ng-click="slider.init(1, true);"></span>

, он очищает интервал, что означает, что он перестает работать, и я не устанавливаю новыйинтервал, потому что я не знаю как.Я использую angularjs $ timeout для запуска интервала, потому что div, над которым я работаю, собирается в бэкэнд-вызове, поэтому мне нужно дождаться их.

---

Я попытался присвоить интервал другой переменной области ивызовите его внутри

в методе init внутри $scope.slider объекта:

$timeout(function(){ $scope.startInterval() });

ниже $scope.slider объекта:

$timeout(function () {
    $scope.startInterval = function() {
        $scope.interval = setInterval(function () {
            console.log('fire function interval');
            $scope.slider.step++;
            if($scope.slider.step === 5) $scope.slider.step = 1;
            $scope.slider.changeSlide($scope.slider.step);
        }, 5000);
    };
    $scope.startInterval();
});

Но это создаст какой-тоцикл Я действительно не знаю, что он работал очень странно.

Что я делаю неправильно, как остановить этот интервал и запустить его снова, после щелчка пролета я хочу сбросить секунды до 0 ..

Я добавляю демо .

Answer 1

Вы можете сделать что-то вроде этого ниже кода, также, пожалуйста, проверьте этот рабочий plunker пример для вашего данного сценария.

Директива:

app.directive('myElement', ['$interval', '$timeout',
  function($interval, $timeout) {
    return {
      restrict: 'E',
      templateUrl: 'template.html',
      link: function(scope) {
        scope.timer=5000;
        scope.step = 1;
        function updateTime() {
          if(scope.step==4) scope.step=0;
          scope.step++;
        }
        scope.stopTime = $interval(updateTime, scope.timer);
        scope.resetTimer=function(step){
          scope.step = step;
          $interval.cancel(scope.stopTime);
          scope.stopTime = $interval(updateTime, scope.timer);
        }
      }
    }
}]);

Answer 2

Вы должны назвать свою функцию и сбросить ее интервал в init следующим образом:

$scope.slider = {
    increment: 0,
    step: 1,
    positionTop: 0,
    init: function (step, isClick) {
        if(isClick) clearInterval($scope.interval);
        $scope.interval = setInterval(intervalSlide, 5000); // Reset interval here
        ...rest of script...
};

// Name your function, no need to attach it to $scope
function intervalSlide() {
    $scope.slider.step++;
    if($scope.slider.step === 5) $scope.slider.step = 1;
    $scope.slider.changeSlide($scope.slider.step);
}

$timeout(function () {
    $scope.slider.changeSlide($scope.slider.step);
    $scope.interval = setInterval(intervalSlide, 5000);
});