Как получить значение данных внутри функции / $ interval с помощью Angularjs

Question

Я хочу получить значение внутри моей функции $ interval и использовать его как интервал времени.

У меня index.html:

<iframe src="{{MediaFile}}" frameborder="0" allowfullscreen autoplay></iframe>

А MediaFile Таблица:

+------+-------------+--------------+
|  ID  |   FileName  |    Interval  | //Interval in secs
+------+-------------+--------------+
|  1   |  image.jpg  |      30      |
+------+-------------+--------------+
|  2   |  image1.jpg |      10      |
+------+-------------+--------------+
|  3   |  video.mp4  |      50      |
+------+-------------+--------------+

А index.js:

// loadMediaFile, select the list of MediaFile in my table
loadMediaFile.MediaFiles('loadMediaFile').then(function (d) {
    $scope.IntervalTime = 2000;
    $scope.Count = -1;

    $interval(function () {
        $scope.Count++
        $scope.MediaFile = '/MediaFiles/Content/' + d[$scope.Count].FileName;

        $scope.IntervalTime = d[$scope.Count].Interval * 1000;

        // This is to load back to index 0 of my MediaFile when all is loaded
        if (d.length == ($scope.Count + 1)) {
            $scope.Count = -1;
        }

    }, $scope.IntervalTime);

    console.log($scope.IntervalTime);
})

Вывод должен быть:

Displays Image.jpg after 2secs
Displays Image1.jpg after 30
Displays Video.mp4 after 10
Displays Image.jpg after 50secs

Проблема в том, что интервал остается равным 2 секундам, он не обновляет значение интервала, так как правильное значение находится внутри моего интервала $. Вот почему я хочу вернуть правильное значение в $ scope.IntervalTime, например, используя return.

Answer 1

Вы должны использовать $timeout с рекурсивным вызовом вместо $interval:

angular.module('app', []).controller('ctrl', function($scope, $timeout) {
  $scope.IntervalTime = 2000;
  $scope.Count = 0;

  (function timeoutFn() {
    $timeout(function() {
      $scope.IntervalTime = (($scope.Count++) + 10) * 1000;
      console.log($scope.IntervalTime)
      timeoutFn();
    }, $scope.IntervalTime);
  })()
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
</div>

Answer 2

Если вы хотите, чтобы первый console.log показывал 11000, поместите оператор приращения (++) перед переменной:

̶$̶s̶c̶o̶p̶e̶.̶I̶n̶t̶e̶r̶v̶a̶l̶T̶i̶m̶e̶ ̶=̶ ̶(̶(̶$̶s̶c̶o̶p̶e̶.̶C̶o̶u̶n̶t̶+̶+̶)̶ ̶+̶ ̶1̶0̶)̶ ̶*̶ ̶1̶0̶0̶0̶;̶
$scope.IntervalTime = ((++$scope.Count) + 10) * 1000;

DEMO

angular.module('app', [])
.controller('ctrl', function($scope, $timeout) {
  $scope.IntervalTime = 2000;
  $scope.Count = 0;
  timeoutFn();

  function timeoutFn() {
    $timeout(function() {
      $scope.IntervalTime = ((++$scope.Count) + 10) * 1000;
      console.log($scope.IntervalTime)
      timeoutFn();
    }, $scope.IntervalTime/10);
  }
})

<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app='app' ng-controller='ctrl'>
    Count={{Count}}<br>
    IntervalTime={{IntervalTime}}
</div>

Answer 3

Ваш код работает правильно .. просто добавьте console.log()

$scope.IntervalTime = 2000;
$scope.Count = 0

$interval(function () {
    $scope.IntervalTime = (($scope.Count++) + 10) * 1000;
    console.log("called :- "+$scope.IntervalTime);
    $scope.getValue($scope.IntervalTime);
}, $scope.IntervalTime);

$scope.getValue = function(tt){
    console.log("get value outside :- "+tt);
};

console.log("first time called :- "+$scope.IntervalTime);