Ionic：$ scopeでDOMを更新していないAngularJS変数

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); 
    }; 

私が言うように、事前の機能が動作し、$スコープ変数が更新されています。更新されるとHTMLに反映されません。

Answer 1

私は、間隔が角度ダイジェストサイクルを通過していないということが起こっていると信じています。そのため、スコープの変更は認識していません。一方、ボタンのクリックは角度自体から呼び出されるので、これらの変更を認識しています。

$ scope. $ apply（）を呼び出すと、これらの変更の角度が通知され、変更をレンダリングするエンジンがキックスタートします。 次コントローラください：。）

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を（）（advance2ながら、何の$スコープ$適用されます（）の呼び出しを持っていないし。 2つ目の呼び出しの後、両方の関数呼び出しがDOMに反映されていることがわかります。ここで

は、機能性を示すフィドルです：​​