ionic中$interval 和 $apply()

標籤：時間   style   play   控制   --   回呼函數   不顯示   one   imp   

media.addEventListener(‘timeupdate‘, function() {//監聽視頻播放時間     if(media.currentTime>1){//如果視頻播時間超過1秒      　　 $scope.scoreShow=true;//打分框彈出
　　　　　　console.log($scope.scoreShow);//true     };
 },true);

給一個視頻 media 對象添加監聽事件： timeupdate 時，回呼函數正常執行，$scope.scoreShow也變成了true，但是在html頁面上

<!--打分彈框-->
<div class="videoMessage" ng-show="scoreShow">    <p>打個分，留下你的態度！</p>            <p class="btns">                <span ng-click="confirmScore()">確定</span>                <span ng-click="ignoreScore()">無視</span>        </p></div>                        

視頻播放至1秒以後，打分彈框始終不顯示，而且在頁面的控制台去看打分彈框，display：none！important；

說明$scope.scoreShow事實上沒有起作用。

很奇怪的一點是：

如果在同一個controller中有一行：$interval(function(){},0);

如下

media.addEventListener(‘timeupdate‘, function() {//監聽視頻播放時間     if(media.currentTime>1){//如果視頻播時間超過1秒      　　 $scope.scoreShow=true;//打分框彈出
　　　　　　console.log($scope.scoreShow);//true     };
 },true);

$interval(function(){},0);

打分彈框就會顯示。

但是如果把$interval 換成原生代碼setInterval , 打分彈框也不會顯示。

***** 重點：

因此，推斷：因為ionic不知道原生代碼做了一些事情，所以不知道$scope.scoreShow改變了，要ionic知道需要用到$scope.$apply()把$scope.scoreShow=true包起來：

media.addEventListener(‘timeupdate‘, function() {//監聽視頻播放時間     if(media.currentTime>1){//如果視頻播時間超過1秒             $scope.$apply(function(){      　　         $scope.scoreShow=true;//打分框彈出             });     }; },true);

這樣$scope.scoreShow不只是變成了true，還真正起到作用了，打分彈框顯示了。

備忘 ：

　　引用 http://www.2cto.com/kf/201311/256848.html 裡的一段話來解釋：什麼時候用$apply()

     那我們到底什麼時候需要去調用$apply()方法呢？情況非常少，實際上幾乎我們所有的代碼都包在$scope.$apply()裡面，像ng-click，controller的初始化，$http的毀掉函數等。在這些情況下，我們不需要自己調用，實際上我們也不能自己調用，否則在$apply()方法裡面再調用$apply()方法會拋出錯誤。如果我們需要在一個新的執行序列中運行代碼時才真正需要用到它，而且若且唯若這個新的執行序列不是被angular JS的庫的方法建立的，這個時候我們需要將代碼用$scope.$apply()包起來 

ionic中$interval 和 $apply()