javascript - ionic : AngularJS Variables not Updating DOM with $scope

Question

我有一个动态更新的对象来表示我的 Ionic 应用程序中当前正在播放的轨道，这样视觉反馈就是当前正在播放的轨道艺术和标题。这个功能工作得非常好，我知道它会正确更新，因为每次我按下按钮跳到下一首轨道时界面都会更新。

但是，我添加了 setInterval() 以便轨道可以自动前进，现在界面不会在每次轨道前进时更新。变量在 $scope 中正确更新，因为我可以听到正确的轨道播放，但界面元素不会更新以匹配。

这是 DOM 问题吗？ Ionic 会在按下按钮时自动执行此操作吗？我只是不明白在计时器上运行而不是要求用户输入时，相同的代码怎么会不起作用。

JS:

function advance() {
        var i = currentIndex;

        $scope.stop();
        if (i < 4) {
            $scope.current = {
                'index': i + 1,
                'track': $scope.active.tracks[i + 1]
            };
            $scope.upNext = $scope.active.tracks[i + 2];
            $scope.play($scope.current.track.preview);

            currentIndex++;

            return;
        }

        $scope.closeModal();
    }

如果这个问题可能有点含糊，我很抱歉，如果需要我可以扩展。

编辑 advance() 函数被这个函数调用:

$scope.open = function (i, r) {
        console.log(currentIndex);
        $scope.openModal(i, r);

        autoAdvance = window.setInterval(advance, 30000);
    };

就像我说的，advance 函数起作用并且 $scope 变量正在更新；它只是在更新时没有反射(reflect)在 HTML 中。

Answer 1

所以，我相信发生的事情是间隔没有通过 Angular 摘要循环，所以它不知道范围的变化。然而，按钮点击是从 Angular 本身内部调用的，因此它知道这些更改。

调用 $scope.$apply() 将这些更改通知 Angular 并启动引擎以呈现更改。采用以下 Controller :

function MyCtrl($scope) {
  $scope.name = 'Superhero';

  window.setInterval(function() {
    advance()
  }, 2000);


  function advance() {
    $scope.name += " 1";
  }


  window.setInterval(function() {
    advance2()
  }, 2000);


  function advance2() {
    $scope.name += " 2";
    $scope.$apply()
  }

}

advance1() 没有 $scope.$apply() 调用，而 advance2() 有。您会注意到，在第二次调用之后，这两个函数调用都反射(reflect)在 DOM 中。

这是一个显示功能的 fiddle :http://jsfiddle.net/pgxnom55/