知识为进步之母,而进步又为富强之源泉。这篇文章主要讲述ionic中$interval 和 $apply()相关的知识,希望能为你提供帮助。
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;
【ionic中$interval 和 $apply()】说明$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()包起来
推荐阅读
- 在Android Studio下使用Hierarchy Viewer
- Android虚拟机不支持AMD的CPU
- Android 7.1.1 之实现 3D Touch
- Android的Fragement基础
- python图片转字符画(如何将图像转换为ASCII图像())
- python如何识别植物(使用TensorFlow-Lite模型进行植物物种识别)
- python如何识别猫狗(对狗和猫的照片进行分类(准确率为 97%))
- python如何检测音乐开始(详细实现指南)
- python如何识别声音(如何使用Python进行声音模式识别?)